Collection of free Tailwind CSS calendar components from Codepen and other resources.

Related Articles

  1. CSS Calendars
  2. jQuery Calendars
Demo image: Custom Calendar

Author

  • Paulson Ps

Links

Made with

  • HTML / CSS

About a code

Custom Calendar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Tailwind CSS Calendar Component

Author

  • Harrishash

Links

Made with

  • HTML / CSS

About a code

Tailwind CSS Calendar Component

Tailwind calendar is a premade component to incorporate into websites.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Full Calendar

Author

  • Anonymous

Links

Made with

  • HTML / CSS / JS

About a code

Full Calendar

Full calendar for any year.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.2.4

Demo image: Calendar Stripe Card

Author

  • Hammaadh Rasheedh

Links

Made with

  • HTML / CSS

About a code

Calendar Stripe Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Lo-fi Tailwind CSS Calendar - Month View

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Calendar - Month View

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Calendar Table Template

Author

  • hebibulla

Links

Made with

  • HTML / CSS

About a code

Calendar Table Template

Calendar template use HTML table.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Tailwind version: 1.6.2

Demo image: Calendar UI with TailwindCSS and AlpineJS

Author

  • mithicher

Links

Made with

  • HTML / CSS / JS

About a code

Calendar UI with TailwindCSS and AlpineJS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.2.0

Demo image: Simple Calendar Day Icon

Author

  • amckinnis

Links

Made with

  • HTML / CSS

About a code

Simple Calendar Day Icon

Just a simple way to show a calendar day (for an single event). Fixed width and height.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0