Card

Text

Preview

Code

HTML

Code

JSX/TSX

Sira team talk

Ricco Xie • 1 June 2023

🕹 Customizable and 😍 accessible design system which provides TailwindCSS component class name library to build modern UI. 💥

<div class="overflow-hidden rounded-lg has-shadow w-80 p-4 flex flex-col gap-2">
	<div class="flex justify-between items-baseline">
		<h3 class="text-xl font-semibold">Sira team talk</h3>
		<div class="text-xs">Ricco Xie • 1 June 2023</div>
	</div>
	<div class="text-sm">
		<p>
			🕹 Customizable and 😍 accessible design system which provides TailwindCSS
			component class name library to build modern UI. 💥
		</p>
	</div>
</div>

<div className='overflow-hidden rounded-lg has-shadow w-80 p-4 flex flex-col gap-2'>
  <div className='flex justify-between items-baseline'>
    <h3 className='text-xl font-semibold'>
      Sira team talk
    </h3>
    <div className='text-xs'>
      Ricco Xie • 1 June 2023
    </div>
  </div>
  <div className='text-sm'>
    <p>
      🕹 Customizable and 😍 accessible design system which provides TailwindCSS component className name library to build
modern UI. 💥
    </p>
  </div>
</div>

Post

Preview

Code

HTML

Code

JSX/TSX

Ricco Xie • 1 June 2023

Sira team talk

🕹 Customizable and 😍 accessible design system which provides TailwindCSS component class name library to build modern UI. 💥

DesignProductDeveloper

<div class="overflow-hidden rounded-lg has-shadow w-80">
	<img
		src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
		class="aspect-video rounded-b-none"
		alt=""
	/>
	<div class="p-4 flex flex-col gap-2">
		<div class="text-xs">Ricco Xie • 1 June 2023</div>
		<h3 class="text-xl font-semibold">Sira team talk</h3>
		<div class="text-sm">
			<p>
				🕹 Customizable and 😍 accessible design system which provides
				TailwindCSS component class name library to build modern UI. 💥
			</p>
		</div>
		<div class="flex gap-2">
			<span class="badge light info"> Design </span>
			<span class="badge light primary"> Product </span>
			<span class="badge light danger"> Developer </span>
		</div>
	</div>
</div>

<div className='overflow-hidden rounded-lg has-shadow w-80'>
  <img src='https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80'
    className='aspect-video rounded-b-none'
    alt='' />
  <div className='p-4 flex flex-col gap-2'>
    <div className='text-xs'>
      Ricco Xie • 1 June 2023
    </div>
    <h3 className='text-xl font-semibold'>
      Sira team talk
    </h3>
    <div className='text-sm'>
      <p>
        🕹 Customizable and 😍 accessible design system which provides TailwindCSS component className name library to build
modern UI. 💥
      </p>
    </div>
    <div className='flex gap-2'>
      <span className='badge light info'>
        Design
      </span>
      <span className='badge light primary'>
        Product
      </span>
      <span className='badge light danger'>
        Developer
      </span>
    </div>
  </div>
</div>

Image Background

Preview

Code

HTML

Code

JSX/TSX

Ricco Xie • 1 June 2023

Sira team talk

🕹 Customizable and 😍 accessible design system which provides TailwindCSS component class name library to build modern UI. 💥

<div class="overflow-hidden rounded-2xl has-shadow w-[30rem] relative">
	<div>
		<img
			src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1244&q=80"
			class="aspect-video"
			alt=""
		/>
	</div>
	<div class="absolute inset-0 z-10 bg-gradient-to-t from-black" />
	<div class="absolute inset-x-0 bottom-0 z-20 p-4 text-white">
		<div class="text-xs">Ricco Xie • 1 June 2023</div>
		<h3 class="text-xl font-semibold">Sira team talk</h3>
		<div class="text-sm opacity-80">
			<p>
				🕹 Customizable and 😍 accessible design system which provides
				TailwindCSS component class name library to build modern UI. 💥
			</p>
		</div>
	</div>
</div>

<div className='overflow-hidden rounded-2xl has-shadow w-[30rem] relative'>
  <div>
    <img src='https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1244&q=80'
      className='aspect-video'
      alt='' />
  </div>
  <div className='absolute inset-0 z-10 bg-gradient-to-t from-black' />
  <div className='absolute inset-x-0 bottom-0 z-20 p-4 text-white'>
    <div className='text-xs'>
      Ricco Xie • 1 June 2023
    </div>
    <h3 className='text-xl font-semibold'>
      Sira team talk
    </h3>
    <div className='text-sm opacity-80'>
      <p>
        🕹 Customizable and 😍 accessible design system which provides TailwindCSS component className name library to build
modern UI. 💥
      </p>
    </div>
  </div>
</div>

List items

Preview

Code

HTML

Code

JSX/TSX

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit?

Ricco Xie • 1 June 2023

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit?

Ricco Xie • 1 June 2023

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit?

Ricco Xie • 1 June 2023

<div class="flex flex-col items-stretch gap-2">
	<div
		class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4"
	>
		<div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
			<h3 class="text-xl font-semibold line-clamp-2">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit?
				</p>
			</h3>
			<div class="text-xs">Ricco Xie • 1 June 2023</div>
		</div>
		<div class="col-span-1">
			<img
				src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1244&q=80"
				class="h-full aspect-square rounded-l-none"
				alt=""
			/>
		</div>
	</div>
	<div
		class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4"
	>
		<div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
			<h3 class="text-xl font-semibold line-clamp-2">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit?
				</p>
			</h3>
			<div class="text-xs">Ricco Xie • 1 June 2023</div>
		</div>
		<div class="col-span-1">
			<img
				src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
				class="h-full aspect-square rounded-l-none"
				alt=""
			/>
		</div>
	</div>
	<div
		class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4"
	>
		<div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
			<h3 class="text-xl font-semibold line-clamp-2">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
					necessitatibus iusto laborum autem placeat aspernatur inventore eius
					deleniti reprehenderit?
				</p>
			</h3>
			<div class="text-xs">Ricco Xie • 1 June 2023</div>
		</div>
		<div class="col-span-1">
			<img
				src="https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80"
				class="h-full aspect-square rounded-l-none"
				alt=""
			/>
		</div>
	</div>
</div>

<div className='flex flex-col items-stretch gap-2'>
  <div className='overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4'>
    <div className='col-span-3 p-4 flex flex-col gap-2 justify-between'>
      <h3 className='text-xl font-semibold line-clamp-2'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit?
        </p>
      </h3>
      <div className='text-xs'>
        Ricco Xie • 1 June 2023
      </div>
    </div>
    <div className='col-span-1'>
      <img src='https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1244&q=80'
        className='h-full aspect-square rounded-l-none'
        alt='' />
    </div>
  </div>
  <div className='overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4'>
    <div className='col-span-3 p-4 flex flex-col gap-2 justify-between'>
      <h3 className='text-xl font-semibold line-clamp-2'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit?
        </p>
      </h3>
      <div className='text-xs'>
        Ricco Xie • 1 June 2023
      </div>
    </div>
    <div className='col-span-1'>
      <img src='https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80'
        className='h-full aspect-square rounded-l-none'
        alt='' />
    </div>
  </div>
  <div className='overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4'>
    <div className='col-span-3 p-4 flex flex-col gap-2 justify-between'>
      <h3 className='text-xl font-semibold line-clamp-2'>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit?
        </p>
      </h3>
      <div className='text-xs'>
        Ricco Xie • 1 June 2023
      </div>
    </div>
    <div className='col-span-1'>
      <img src='https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80'
        className='h-full aspect-square rounded-l-none'
        alt='' />
    </div>
  </div>
</div>

Gradient Text Changelog