TEMPLATES REFERENCE
Tailwind CSS
(HTML/CSS Only, Minimal JavaScript)

Navbars

v1.0
Navbars normally require JavaScript (for drop-down/menu functionality) and yet we want to use as little JS as possible in these HTML templates. Therefore we will focus less on providing (fully-functional) navbar templates and focus on HTML mainly.

Cards

v1.0
Cards using ".lg:w-1/3" on large and ".md:w-1/2" on medium screens. On small screens, the cards are full width ".w-full" and the image is placed at the top (".md:flex" will not apply) in a rounded shape with equal height and width.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

v1.1
Cards using ".w-1/2" on large and medium screens. On small screens, the cards are full width ".w-full" and the image is placed at the top (".md:flex" will not apply) in a rounded shape with equal height and width.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

v2.0
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/4" to fit 4 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Card (with line border)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Card (without border)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Card (with shadow-md)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Card (with shadow-lg)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

v2.1
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Card (with line border)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Card (without border)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Card (with shadow)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

v3.0
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Image Card (with line border)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Card (without border)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Image Card (with shadow)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

v3.1
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens. For the image to be round, use ".rounded-full" on an image with equal height and width applied.

Image Card (with line border)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Card (without border)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

Image Card (with shadow)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed recusandae libero possimus culpa quod

TEMPLATES REFERENCE
Tailwind CSS
(HTML/CSS Only, Minimal JavaScript)

Navbars

v1.0
Navbars normally require JavaScript (for drop-down/menu functionality) and yet we want to use as little JS as possible in these HTML templates. Therefore we will focus less on providing (fully-functional) navbar templates and focus on HTML mainly.

Cards

v1.0
Cards using ".lg:w-1/3" on large and ".md:w-1/2" on medium screens. On small screens, the cards are full width ".w-full" and the image is placed at the top (".md:flex" will not apply) in a rounded shape with equal height and width.

v1.1
Cards using ".w-1/2" on large and medium screens. On small screens, the cards are full width ".w-full" and the image is placed at the top (".md:flex" will not apply) in a rounded shape with equal height and width.

v2.0
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/4" to fit 4 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Card (with line border)

Card (without border)

Card (with shadow-md)

Card (with shadow-lg)

v2.1
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Card (with line border)

Card (without border)

Card (with shadow)

v3.0
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Image Card (with line border)

Card (without border)

Image Card (with shadow)

Image Card (with line border)

Card (without border)

Image Card (with shadow)

Footers

v1.0
Gray basic version

v1.1
Black basic version

v2.0
Center minimal gray

v2.1
Center minimal black

v3.0
Center stack minimal gray

v3.1
Center stack minimal gray

TEMPLATES REFERENCE Tailwind CSS (HTML/CSS Only, Minimal JavaScript)

Navbars

v1.0 Navbars normally require JavaScript (for drop-down/menu functionality) and yet we want to use as little JS as possible in these HTML templates. Therefore we will focus less on providing (fully-functional) navbar templates and focus on HTML mainly.

Cards

v1.0 Cards using ".lg:w-1/3" on large and ".md:w-1/2" on medium screens. On small screens, the cards are full width ".w-full" and the image is placed at the top (".md:flex" will not apply) in a rounded shape with equal height and width.

v1.1 Cards using ".w-1/2" on large and medium screens. On small screens, the cards are full width ".w-full" and the image is placed at the top (".md:flex" will not apply) in a rounded shape with equal height and width.

v2.0 Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/4" to fit 4 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Card (with line border)

Card (without border)

Card (with shadow-md)

Card (with shadow-lg)

v2.1 Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Card (with line border)

Card (without border)

Card (with shadow)

v3.0 Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

Image Card (with line border)

Card (without border)

Image Card (with shadow)

Image Card (with line border)

Card (without border)

Image Card (with shadow)

Footers

v1.0 Gray basic version

v1.1 Black basic version

v2.0 Center minimal gray

v2.1 Center minimal black

v3.0 Center stack minimal gray

v3.1 Center stack minimal gray

TEMPLATES REFERENCE
Tailwind CSS
(HTML/CSS Only, Minimal JavaScript)

v1.0
Navbars normally require JavaScript (for drop-down/menu functionality) and yet we want to use as little JS as possible in these HTML templates. Therefore we will focus less on providing (fully-functional) navbar templates and focus on HTML mainly.

v1.0
Cards using ".lg:w-1/3" on large and ".md:w-1/2" on medium screens. On small screens, the cards are full width ".w-full" and the image is placed at the top (".md:flex" will not apply) in a rounded shape with equal height and width.

v1.1
Cards using ".w-1/2" on large and medium screens. On small screens, the cards are full width ".w-full" and the image is placed at the top (".md:flex" will not apply) in a rounded shape with equal height and width.

v2.0
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/4" to fit 4 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

v2.1
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

v3.0
Place these cards in a div with ".flex .flex-wrap" applied. This card also uses ".lg:w-1/3" to fit 3 cards horizontally on large screens and ".md:1/2" to fit a maximum of 2 cards horizontally on medium screens. The base case is ".w-full" for full width on small screens.

v1.0
Gray basic version

v1.1
Black basic version

v2.0
Center minimal gray

v2.1
Center minimal black

v3.0
Center stack minimal gray

v3.1
Center stack minimal gray