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

631

<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.7k
Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

3 years ago

17k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

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

Author:
Nick Girga

9 months ago

732
Login Form
Login Form

Author:
Md. Tofayel islam

1 year ago

2.3k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

15k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

10 months ago

964
Material 3 Checkboxes [Light]
Checkboxes that conform to Google's Material 3 design guidelines

Author:
Nick Girga

9 months ago

495
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.9k
Drag and drop image upload with image preview

Author:
Santos78

3 years ago

23.1k
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

Author:
SHARIFUL ISLAM

6 months ago

801
time Tailwind CSS and Alpinejs

Author:
Hai mmm

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components