Product Form - Reverie

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

Tailwind v3.4 1.3k 1

<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

Prashant

4 years ago

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

Prajwal Hallale

4 years ago

17.1k
Yes / No radio input with reset button

Kris Showen

3 years ago

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

Nick Girga

1 year ago

1.2k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Muhammad Imran

2 years ago

2.6k
test2

SHAHAD EIDAH ALHAERTHI

2 years ago

2.3k
Elegant Textboxes
Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

Nick Girga

1 year ago

1.3k
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.2k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

SHARIFUL ISLAM

1 year ago

2.6k
File upload input box

Mohit Prajapati

4 years ago

15.3k
Single Input newsletter form

Task Master

3 years ago

11k
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.

SHARIFUL ISLAM

1 year ago

2.3k