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

627

<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.5k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

9 months ago

658
floting input

Author:
Md. Tofayel islam

1 year ago

3.1k
test1 اصلي

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

2k
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

1 year ago

2.2k
File upload input box

Author:
Mohit Prajapati

3 years ago

14.8k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.5k
Maintenance mode

Author:
Maxim

2 years ago

4.3k
Material 3 Text Fields [Light]
Text fields that conform to Google's Material 3 design guidelines. Can be used for single-line text fields as well as textareas.

Author:
Nick Girga

9 months ago

903
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.

Author:
SHARIFUL ISLAM

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components