卡片

文字段落

演示

代码

HTML

代码

JSX/TSX

Sira 团队会议

Ricco Xie • 2023.06.01

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

<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 团队会议</h3>
		<div class="text-xs">Ricco Xie • 2023.06.01</div>
	</div>
	<div class="text-sm">
		<p>
			鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
		</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 团队会议
    </h3>
    <div className='text-xs'>
      Ricco Xie • 2023.06.01
    </div>
  </div>
  <div className='text-sm'>
    <p>
      鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
    </p>
  </div>
</div>

帖子

演示

代码

HTML

代码

JSX/TSX

Ricco Xie • 2023.06.01

Sira 团队会议

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

设计产品开发者

<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 • 2023.06.01</div>
		<h3 class="text-xl font-semibold">Sira 团队会议</h3>
		<div class="text-sm">
			<p>
				鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
			</p>
		</div>
		<div class="flex gap-2">
			<span class="badge light info"> 设计 </span>
			<span class="badge light primary"> 产品 </span>
			<span class="badge light danger"> 开发者 </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 • 2023.06.01
    </div>
    <h3 className='text-xl font-semibold'>
      Sira 团队会议
    </h3>
    <div className='text-sm'>
      <p>
        鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
      </p>
    </div>
    <div className='flex gap-2'>
      <span className='badge light info'>
        设计
      </span>
      <span className='badge light primary'>
        产品
      </span>
      <span className='badge light danger'>
        开发者
      </span>
    </div>
  </div>
</div>

图片背景

演示

代码

HTML

代码

JSX/TSX

Ricco Xie • 2023.06.01

Sira 团队会议

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

<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 • 2023.06.01</div>
		<h3 class="text-xl font-semibold">Sira 团队会议</h3>
		<div class="text-sm opacity-80">
			<p>
				鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
			</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 • 2023.06.01
    </div>
    <h3 className='text-xl font-semibold'>
      Sira 团队会议
    </h3>
    <div className='text-sm opacity-80'>
      <p>
        鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
      </p>
    </div>
  </div>
</div>

列表项

演示

代码

HTML

代码

JSX/TSX

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

Ricco Xie • 2023.06.01

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

Ricco Xie • 2023.06.01

鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础

Ricco Xie • 2023.06.01

<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>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</p>
			</h3>
			<div class="text-xs">Ricco Xie • 2023.06.01</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>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</p>
			</h3>
			<div class="text-xs">Ricco Xie • 2023.06.01</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>
					鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
				</p>
			</h3>
			<div class="text-xs">Ricco Xie • 2023.06.01</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>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </p>
      </h3>
      <div className='text-xs'>
        Ricco Xie • 2023.06.01
      </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>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </p>
      </h3>
      <div className='text-xs'>
        Ricco Xie • 2023.06.01
      </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>
          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
        </p>
      </h3>
      <div className='text-xs'>
        Ricco Xie • 2023.06.01
      </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>

渐变色文本 Changelog