提醒

类别

默认

演示

代码

HTML

代码

JSX/TSX

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

<div class="prompt success">
	<div class="content">
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
			necessitatibus iusto laborum autem placeat aspernatur inventore eius
			deleniti reprehenderit? Numquam commodi totam mollitia quod
		</p>
	</div>
</div>

<div className='prompt success'>
  <div className='content'>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
    </p>
  </div>
</div>

Outline 线框

演示

代码

HTML

代码

JSX/TSX

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

<div class="prompt warn outline">
	<div class="content">
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
			necessitatibus iusto laborum autem placeat aspernatur inventore eius
			deleniti reprehenderit? Numquam commodi totam mollitia quod
		</p>
	</div>
</div>

<div className='prompt warn outline'>
  <div className='content'>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
    </p>
  </div>
</div>

Ghost 幽灵

演示

代码

HTML

代码

JSX/TSX

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

<div class="prompt danger ghost">
	<div class="content">
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
			necessitatibus iusto laborum autem placeat aspernatur inventore eius
			deleniti reprehenderit? Numquam commodi totam mollitia quod
		</p>
	</div>
</div>

<div className='prompt danger ghost'>
  <div className='content'>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
    </p>
  </div>
</div>

形状

默认

演示

代码

HTML

代码

JSX/TSX

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

<div class="prompt success">
	<div class="content">
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
			necessitatibus iusto laborum autem placeat aspernatur inventore eius
			deleniti reprehenderit? Numquam commodi totam mollitia quod
		</p>
	</div>
</div>

<div className='prompt success'>
  <div className='content'>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
    </p>
  </div>
</div>

Square 方形

演示

代码

HTML

代码

JSX/TSX

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

<div class="prompt warn square">
	<div class="content">
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
			necessitatibus iusto laborum autem placeat aspernatur inventore eius
			deleniti reprehenderit? Numquam commodi totam mollitia quod
		</p>
	</div>
</div>

<div className='prompt warn square'>
  <div className='content'>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
    </p>
  </div>
</div>

带有图标

演示

代码

HTML

代码

JSX/TSX

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

<div class="prompt bw">
	<div class="icon">
		<svg
			class="inline w-6 h-6 fill-current"
			enable-background="new 0 0 24 24"
			viewBox="0 0 24 24"
			xmlns="http://www.w3.org/2000/svg"
		>
			<g data-v-2d0d7d62="">
				<rect data-v-2d0d7d62="" fill="none" height="24" width="24" />
			</g>
			<g data-v-2d0d7d62="">
				<g data-v-2d0d7d62="" />
				<g data-v-2d0d7d62="">
					<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
					<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
					<path
						d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z"
						data-v-2d0d7d62=""
					/>
					<path
						d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"
						data-v-2d0d7d62=""
					/>
				</g>
			</g>
		</svg>
	</div>
	<div class="content">
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
			necessitatibus iusto laborum autem placeat aspernatur inventore eius
			deleniti reprehenderit? Numquam commodi totam mollitia quod
		</p>
	</div>
</div>

<div className='prompt bw'>
  <div className='icon'>
    <svg className='inline w-6 h-6 fill-current'
      enableBackground='new 0 0 24 24'
      viewBox='0 0 24 24'
      xmlns='http://www.w3.org/2000/svg'>
      <g data-v-2d0d7d62=''>
        <rect data-v-2d0d7d62=''
          fill='none'
          height='24'
          width='24' />
      </g>
      <g data-v-2d0d7d62=''>
        <g data-v-2d0d7d62='' />
        <g data-v-2d0d7d62=''>
          <circle cx='15.5'
            cy='9.5'
            data-v-2d0d7d62=''
            r='1.5' />
          <circle cx='8.5'
            cy='9.5'
            data-v-2d0d7d62=''
            r='1.5' />
          <path d='M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z'
            data-v-2d0d7d62='' />
          <path d='M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z'
            data-v-2d0d7d62='' />
        </g>
      </g>
    </svg>
  </div>
  <div className='content'>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
    </p>
  </div>
</div>

标题

演示

代码

HTML

代码

JSX/TSX

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

Lorem ipsum dolor sit amet

<div class="prompt success">
	<div class="content">
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
			necessitatibus iusto laborum autem placeat aspernatur inventore eius
			deleniti reprehenderit? Numquam commodi totam mollitia quod
		</p>
	</div>
	<div class="title">Lorem ipsum dolor sit amet</div>
	<div class="icon">
		<svg
			class="inline w-6 h-6 fill-current"
			enable-background="new 0 0 24 24"
			viewBox="0 0 24 24"
			xmlns="http://www.w3.org/2000/svg"
		>
			<g data-v-2d0d7d62="">
				<rect data-v-2d0d7d62="" fill="none" height="24" width="24" />
			</g>
			<g data-v-2d0d7d62="">
				<g data-v-2d0d7d62="" />
				<g data-v-2d0d7d62="">
					<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
					<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
					<path
						d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z"
						data-v-2d0d7d62=""
					/>
					<path
						d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"
						data-v-2d0d7d62=""
					/>
				</g>
			</g>
		</svg>
	</div>
</div>

<div className='prompt success'>
  <div className='content'>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
    </p>
  </div>
  <div className='title'>
    Lorem ipsum dolor sit amet
  </div>
  <div className='icon'>
    <svg className='inline w-6 h-6 fill-current'
      enableBackground='new 0 0 24 24'
      viewBox='0 0 24 24'
      xmlns='http://www.w3.org/2000/svg'>
      <g data-v-2d0d7d62=''>
        <rect data-v-2d0d7d62=''
          fill='none'
          height='24'
          width='24' />
      </g>
      <g data-v-2d0d7d62=''>
        <g data-v-2d0d7d62='' />
        <g data-v-2d0d7d62=''>
          <circle cx='15.5'
            cy='9.5'
            data-v-2d0d7d62=''
            r='1.5' />
          <circle cx='8.5'
            cy='9.5'
            data-v-2d0d7d62=''
            r='1.5' />
          <path d='M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z'
            data-v-2d0d7d62='' />
          <path d='M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z'
            data-v-2d0d7d62='' />
        </g>
      </g>
    </svg>
  </div>
</div>

尺寸

演示

代码

HTML

代码

JSX/TSX

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

Lorem ipsum dolor sit amet

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

Lorem ipsum dolor sit amet

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

Lorem ipsum dolor sit amet

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

Lorem ipsum dolor sit amet

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

Lorem ipsum dolor sit amet

<div class="grid gap-4">
	<div class="prompt success xs">
		<div class="content">
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
				necessitatibus iusto laborum autem placeat aspernatur inventore eius
				deleniti reprehenderit? Numquam commodi totam mollitia quod
			</p>
		</div>
		<div class="title">Lorem ipsum dolor sit amet</div>
		<div class="icon">
			<svg
				class="inline w-6 h-6 fill-current"
				enable-background="new 0 0 24 24"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<g data-v-2d0d7d62="">
					<rect data-v-2d0d7d62="" fill="none" height="24" width="24" />
				</g>
				<g data-v-2d0d7d62="">
					<g data-v-2d0d7d62="" />
					<g data-v-2d0d7d62="">
						<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<path
							d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z"
							data-v-2d0d7d62=""
						/>
						<path
							d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"
							data-v-2d0d7d62=""
						/>
					</g>
				</g>
			</svg>
		</div>
	</div>
	<div class="prompt success sm">
		<div class="content">
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
				necessitatibus iusto laborum autem placeat aspernatur inventore eius
				deleniti reprehenderit? Numquam commodi totam mollitia quod
			</p>
		</div>
		<div class="title">Lorem ipsum dolor sit amet</div>
		<div class="icon">
			<svg
				class="inline w-6 h-6 fill-current"
				enable-background="new 0 0 24 24"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<g data-v-2d0d7d62="">
					<rect data-v-2d0d7d62="" fill="none" height="24" width="24" />
				</g>
				<g data-v-2d0d7d62="">
					<g data-v-2d0d7d62="" />
					<g data-v-2d0d7d62="">
						<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<path
							d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z"
							data-v-2d0d7d62=""
						/>
						<path
							d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"
							data-v-2d0d7d62=""
						/>
					</g>
				</g>
			</svg>
		</div>
	</div>
	<div class="prompt success md">
		<div class="content">
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
				necessitatibus iusto laborum autem placeat aspernatur inventore eius
				deleniti reprehenderit? Numquam commodi totam mollitia quod
			</p>
		</div>
		<div class="title">Lorem ipsum dolor sit amet</div>
		<div class="icon">
			<svg
				class="inline w-6 h-6 fill-current"
				enable-background="new 0 0 24 24"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<g data-v-2d0d7d62="">
					<rect data-v-2d0d7d62="" fill="none" height="24" width="24" />
				</g>
				<g data-v-2d0d7d62="">
					<g data-v-2d0d7d62="" />
					<g data-v-2d0d7d62="">
						<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<path
							d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z"
							data-v-2d0d7d62=""
						/>
						<path
							d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"
							data-v-2d0d7d62=""
						/>
					</g>
				</g>
			</svg>
		</div>
	</div>
	<div class="prompt success lg">
		<div class="content">
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
				necessitatibus iusto laborum autem placeat aspernatur inventore eius
				deleniti reprehenderit? Numquam commodi totam mollitia quod
			</p>
		</div>
		<div class="title">Lorem ipsum dolor sit amet</div>
		<div class="icon">
			<svg
				class="inline w-6 h-6 fill-current"
				enable-background="new 0 0 24 24"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<g data-v-2d0d7d62="">
					<rect data-v-2d0d7d62="" fill="none" height="24" width="24" />
				</g>
				<g data-v-2d0d7d62="">
					<g data-v-2d0d7d62="" />
					<g data-v-2d0d7d62="">
						<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<path
							d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z"
							data-v-2d0d7d62=""
						/>
						<path
							d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"
							data-v-2d0d7d62=""
						/>
					</g>
				</g>
			</svg>
		</div>
	</div>
	<div class="prompt success xl">
		<div class="content">
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
				necessitatibus iusto laborum autem placeat aspernatur inventore eius
				deleniti reprehenderit? Numquam commodi totam mollitia quod
			</p>
		</div>
		<div class="title">Lorem ipsum dolor sit amet</div>
		<div class="icon">
			<svg
				class="inline w-6 h-6 fill-current"
				enable-background="new 0 0 24 24"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<g data-v-2d0d7d62="">
					<rect data-v-2d0d7d62="" fill="none" height="24" width="24" />
				</g>
				<g data-v-2d0d7d62="">
					<g data-v-2d0d7d62="" />
					<g data-v-2d0d7d62="">
						<circle cx="15.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<circle cx="8.5" cy="9.5" data-v-2d0d7d62="" r="1.5" />
						<path
							d="M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z"
							data-v-2d0d7d62=""
						/>
						<path
							d="M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z"
							data-v-2d0d7d62=""
						/>
					</g>
				</g>
			</svg>
		</div>
	</div>
</div>

<div className='grid gap-4'>
  <div className='prompt success xs'>
    <div className='content'>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
      </p>
    </div>
    <div className='title'>
      Lorem ipsum dolor sit amet
    </div>
    <div className='icon'>
      <svg className='inline w-6 h-6 fill-current'
        enableBackground='new 0 0 24 24'
        viewBox='0 0 24 24'
        xmlns='http://www.w3.org/2000/svg'>
        <g data-v-2d0d7d62=''>
          <rect data-v-2d0d7d62=''
            fill='none'
            height='24'
            width='24' />
        </g>
        <g data-v-2d0d7d62=''>
          <g data-v-2d0d7d62='' />
          <g data-v-2d0d7d62=''>
            <circle cx='15.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <circle cx='8.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <path d='M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z'
              data-v-2d0d7d62='' />
            <path d='M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z'
              data-v-2d0d7d62='' />
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div className='prompt success sm'>
    <div className='content'>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
      </p>
    </div>
    <div className='title'>
      Lorem ipsum dolor sit amet
    </div>
    <div className='icon'>
      <svg className='inline w-6 h-6 fill-current'
        enableBackground='new 0 0 24 24'
        viewBox='0 0 24 24'
        xmlns='http://www.w3.org/2000/svg'>
        <g data-v-2d0d7d62=''>
          <rect data-v-2d0d7d62=''
            fill='none'
            height='24'
            width='24' />
        </g>
        <g data-v-2d0d7d62=''>
          <g data-v-2d0d7d62='' />
          <g data-v-2d0d7d62=''>
            <circle cx='15.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <circle cx='8.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <path d='M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z'
              data-v-2d0d7d62='' />
            <path d='M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z'
              data-v-2d0d7d62='' />
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div className='prompt success md'>
    <div className='content'>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
      </p>
    </div>
    <div className='title'>
      Lorem ipsum dolor sit amet
    </div>
    <div className='icon'>
      <svg className='inline w-6 h-6 fill-current'
        enableBackground='new 0 0 24 24'
        viewBox='0 0 24 24'
        xmlns='http://www.w3.org/2000/svg'>
        <g data-v-2d0d7d62=''>
          <rect data-v-2d0d7d62=''
            fill='none'
            height='24'
            width='24' />
        </g>
        <g data-v-2d0d7d62=''>
          <g data-v-2d0d7d62='' />
          <g data-v-2d0d7d62=''>
            <circle cx='15.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <circle cx='8.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <path d='M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z'
              data-v-2d0d7d62='' />
            <path d='M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z'
              data-v-2d0d7d62='' />
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div className='prompt success lg'>
    <div className='content'>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
      </p>
    </div>
    <div className='title'>
      Lorem ipsum dolor sit amet
    </div>
    <div className='icon'>
      <svg className='inline w-6 h-6 fill-current'
        enableBackground='new 0 0 24 24'
        viewBox='0 0 24 24'
        xmlns='http://www.w3.org/2000/svg'>
        <g data-v-2d0d7d62=''>
          <rect data-v-2d0d7d62=''
            fill='none'
            height='24'
            width='24' />
        </g>
        <g data-v-2d0d7d62=''>
          <g data-v-2d0d7d62='' />
          <g data-v-2d0d7d62=''>
            <circle cx='15.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <circle cx='8.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <path d='M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z'
              data-v-2d0d7d62='' />
            <path d='M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z'
              data-v-2d0d7d62='' />
          </g>
        </g>
      </svg>
    </div>
  </div>
  <div className='prompt success xl'>
    <div className='content'>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
      </p>
    </div>
    <div className='title'>
      Lorem ipsum dolor sit amet
    </div>
    <div className='icon'>
      <svg className='inline w-6 h-6 fill-current'
        enableBackground='new 0 0 24 24'
        viewBox='0 0 24 24'
        xmlns='http://www.w3.org/2000/svg'>
        <g data-v-2d0d7d62=''>
          <rect data-v-2d0d7d62=''
            fill='none'
            height='24'
            width='24' />
        </g>
        <g data-v-2d0d7d62=''>
          <g data-v-2d0d7d62='' />
          <g data-v-2d0d7d62=''>
            <circle cx='15.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <circle cx='8.5'
              cy='9.5'
              data-v-2d0d7d62=''
              r='1.5' />
            <path d='M12,18c2.28,0,4.22-1.66,5-4H7C7.78,16.34,9.72,18,12,18z'
              data-v-2d0d7d62='' />
            <path d='M11.99,2C6.47,2,2,6.48,2,12c0,5.52,4.47,10,9.99,10C17.52,22,22,17.52,22,12C22,6.48,17.52,2,11.99,2z M12,20 c-4.42,0-8-3.58-8-8c0-4.42,3.58-8,8-8s8,3.58,8,8C20,16.42,16.42,20,12,20z'
              data-v-2d0d7d62='' />
          </g>
        </g>
      </svg>
    </div>
  </div>
</div>

对话框单选框