Gradients and effects

Text gradient

Hello I'm a gradient

Style playground

Applying basic CSS patterns with Tailwind

Table sample

Tailwind + DaisyUI makes this extremely simple.

Person Role Goal
Avatar
Diego
Madrid
 Mobile developer Learn web
Avatar
Taimi
Habana
 Bone fixer Buy houses
Avatar
Adrián
Denia
 Toy breaker Play piano
Avatar
Juan
Vic
 Artist Apocalypsis
Avatar
Toño
Alcobendas
 Boat crasher BBQ mastering

FlexBox

Patterns

Strech all

flex gap-3
flex-grow
flex-grow
flex-grow
flex-grow

Stretch middle

flex gap-3
flex-none w-32
flex-grow
flex-none w-40

Stretch 3x3 Grid

flex flex-wrap -mx-2 -mb-4
w-1/3 px-2 pb-4
w-1/3 px-2 pb-4
w-1/3 px-2 pb-4
w-1/3 px-2 pb-4
w-1/3 px-2 pb-4
w-1/3 px-2 pb-4

Responsive 4 columns flex grid

flex flex-wrap -mx-2 -mb-4
w-full md:w-1/2 lg:w-1/4 px-2 pb-4
w-full md:w-1/2 lg:w-1/4 px-2 pb-4
w-full lg:w-1/2 px-2 pb-4
w-full lg:w-1/2 px-2 pb-4
w-full md:w-1/2 lg:w-1/4 px-2 pb-4
w-full md:w-1/2 lg:w-1/4 px-2 pb-4