Prompt

Type

Default

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? 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

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? 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

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? 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>

Shape

Default

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? 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

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? 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>

Icon

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? 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>

Title

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? 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>

Size

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? 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>

Modal Radio