Home
S V
Product Form - Reverie

Product Form - Reverie

This tailwind example is contributed by S V, on 06-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Author S V

518

<div style="--form-bg-color: #F4E8D7; --option-border-color: #E2D1BC;--primary-bg-color: #E2322F; --text-strike-color: #E2322F; --primary-text-color: #FFF3E1; --text-color: #93816D; --input-outline-color: #E2D1BC; --input-checked-color: #B29A7F; --input-checked-bg-color: #EADCCA;">
  <div class="t-bg-[--form-bg-color] t-border t-rounded-[25px] t-px-6 t-py-4 t-w-full t-mx-auto t-max-w-2xl t-text-[--text-color]">
    <h4 class="t-text-xl lg:t-text-2xl t-font-semibold t-mb-3">
      Choose an option:
    </h4>

<div class="t-grid t-gap-4">
      <label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input checked class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="option1" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <span class="t-pl-2">1 Pack</span>
          <div class="t-grid t-text-right t-leading-none">
            <strong>$39</strong>
          </div>
        </div>
        <span class="t-absolute t-left-1/2 -t-translate-x-1/2">Free Shipping</span>
      </label>

<label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="option-badge t-inline-block t-leading-[1.25] t-px-3 t-py-0.5 t-rounded-[15px] t-absolute t-top-0 t-left-1 -t-translate-y-1/3 t-bg-[--primary-bg-color] t-text-[--primary-text-color] t-text-[10px]">10% OFF Most Popular</span>
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="option1" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <span class="t-pl-2">2 Pack</span>
          <div class="t-grid t-text-right t-leading-none">
            <strong>$71.99</strong>
            <small class="t-line-through t-text-[--text-strike-color]">$80.00</small>
          </div>
        </div>
        <span class="t-absolute t-left-1/2 -t-translate-x-1/2">Free Shipping</span>
      </label>

<label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="option-badge t-inline-block t-leading-[1.25] t-px-3 t-py-0.5 t-rounded-[15px] t-absolute t-top-0 t-left-1 -t-translate-y-1/3 t-bg-[--primary-bg-color] t-text-[--primary-text-color] t-text-[10px]">15% OFF Best Value</span>
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="option1" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <span class="t-pl-2">3 Pack</span>
          <div class="t-grid t-text-right t-leading-none">
            <strong>$101.99</strong>
            <small class="t-line-through t-text-[--text-strike-color]">$120.00</small>
          </div>
        </div>
        <span class="t-absolute t-left-1/2 -t-translate-x-1/2">Free Shipping</span>
      </label>
    </div>

<h4 class="t-text-xl lg:t-text-2xl t-font-semibold t-mb-3">
      Frequency:
    </h4>

<div class="t-grid t-gap-4">
      <label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input checked class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="frequency" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <div class="t-grid t-text-right t-leading-none">
            <span class="t-pl-2"><strong>$71.99</strong></span>
          </div>
          <span>One-time purchase</span>
        </div>
      </label>

<label class="t-flex t-items-center t-border-[1.5px] t-border-solid t-border-[--option-border-color] t-rounded-[50px] t-px-5 t-py-3 t-my-0 t-cursor-pointer t-relative has-[:checked]:t-bg-[--input-checked-bg-color]">
        <span class="t-inline-flex t-items-center t-justify-center t-w-4 t-h-4 t-border-[1px] t-border-solid t-border-[--input-outline-color] t-rounded-full ">
          <input class="t-appearance-none t-w-2.5 t-h-2.5 t-aspect-square t-rounded-full checked:t-bg-[--input-checked-color]" type="radio" name="frequency" />
        </span>
        <div class="option-wrap t-flex t-items-center t-justify-between t-w-full">
          <div class="t-grid t-text-right t-leading-none t-pl-2">
            <span><strong>$61.19</strong></span>
            <small class="t-line-through t-text-[--text-strike-color]">$72.00</small>
          </div>
          <span>Subscribe & Save <strong class="t-text-[--primary-bg-color]">15% OFF</strong></span>
        </div>
      </label>
    </div>
  </div>
</div>

Related Examples

Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.6k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

3 years ago

16.9k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

10.5k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

7 months ago

637
Login Form with Icon

Author:
Akai

2 months ago

149
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

9k
Sign in / Login Form

Author:
Bunny

3 years ago

13.6k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.4k
File Upload

Author:
Rajesh Maheshwari

9 months ago

975
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

10 months ago

1.5k
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

17.1k
File upload with icon

Author:
Fagundo67

2 years ago

17.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components