Testimoni

testimoni

This tailwind example is contributed by Haqiman, on 30-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Dropdown

Author Haqiman

Tailwind v3.4 117

Fork Fullscreen

<div class="mt-10 lg:col-span-4 bg-white rounded-3xl p-6 sm:p-7 shadow-xs border border-slate-200/80">
      <div class="border-b border-slate-100 pb-4 mb-5">
        <h3 class="text-base font-black text-[#0C2F31]">Kirim Testimoni</h3>
        <p class="text-xs text-slate-400 mt-0.5 leading-relaxed">
          Ceritakan pengalamanmu menggunakan layanan kami.
        </p>
      </div>

<form id="testiForm" onsubmit="event.preventDefault(); alert('Testimoni berhasil dikirim!');" class="space-y-4">
        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1.5">Nama</label>
          <input type="text" placeholder="Nama Anda" required class="w-full px-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-xs sm:text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-[#0C2F31]/20 focus:border-[#0C2F31] transition" />
        </div>
        <div class="relative">
          <label class="block text-xs font-bold text-slate-700 mb-1.5">Rating</label>
          <button type="button" onclick="toggleDropdown('ratingDropdown')" id="ratingTrigger" class="w-full px-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-xs sm:text-sm font-medium flex items-center justify-between text-slate-700 focus:outline-none focus:ring-2 focus:ring-[#0C2F31]/20 focus:border-[#0C2F31] transition text-left">
              <span id="ratingLabel" class="flex items-center gap-1.5">
                <span class="text-amber-400 text-sm">★</span>
                <span>Pilih rating</span>
              </span>
              <svg class="w-4 h-4 text-slate-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
          <div id="ratingDropdown"
            class="absolute z-20 left-0 right-0 mt-1 bg-white rounded-2xl shadow-xl border border-slate-200 p-2 hidden transition-all">
            <div class="px-3 py-1.5 text-[11px] font-bold text-slate-400 border-b border-slate-100 mb-1">
              Penilaian Anda
            </div>
            <div onclick="selectRating(5, 'Sangat puas')"
              class="rating-opt flex items-center justify-between px-3 py-2 rounded-xl text-xs cursor-pointer bg-[#9EE96D]/15 text-[#0C2F31] font-bold transition">
              <span class="flex items-center gap-1.5">
                  <span class="text-amber-400 tracking-wider">★★★★★</span>
              <span>Sangat puas</span>
              </span>
              <span class="w-1.5 h-1.5 rounded-full bg-[#0C2F31]"></span>
            </div>
            <div onclick="selectRating(4, 'Puas')"
              class="rating-opt flex items-center justify-between px-3 py-2 rounded-xl text-xs cursor-pointer text-slate-700 hover:bg-[#9EE96D]/15 hover:text-[#0C2F31] transition font-medium">
              <span class="flex items-center gap-1.5">
                  <span class="text-amber-400 tracking-wider">★★★★<span class="text-slate-300">☆</span></span>
              <span>Puas</span>
              </span>
            </div>
            <div onclick="selectRating(3, 'Cukup')"
              class="rating-opt flex items-center justify-between px-3 py-2 rounded-xl text-xs cursor-pointer text-slate-700 hover:bg-[#9EE96D]/15 hover:text-[#0C2F31] transition font-medium">
              <span class="flex items-center gap-1.5">
                  <span class="text-amber-400 tracking-wider">★★★<span class="text-slate-300">☆☆</span></span>
              <span>Cukup</span>
              </span>
            </div>
            <div onclick="selectRating(2, 'Kurang')"
              class="rating-opt flex items-center justify-between px-3 py-2 rounded-xl text-xs cursor-pointer text-slate-700 hover:bg-[#9EE96D]/15 hover:text-[#0C2F31] transition font-medium">
              <span class="flex items-center gap-1.5">
                  <span class="text-amber-400 tracking-wider">★★<span class="text-slate-300">☆☆☆</span></span>
              <span>Kurang</span>
              </span>
            </div>
            <div onclick="selectRating(1, 'Tidak puas')"
              class="rating-opt flex items-center justify-between px-3 py-2 rounded-xl text-xs cursor-pointer text-slate-700 hover:bg-[#9EE96D]/15 hover:text-[#0C2F31] transition font-medium">
              <span class="flex items-center gap-1.5">
                  <span class="text-amber-400 tracking-wider">★<span class="text-slate-300">☆☆☆☆</span></span>
              <span>Tidak puas</span>
              </span>
            </div>
          </div>
        </div>
        <div class="relative">
          <label class="block text-xs font-bold text-slate-700 mb-1.5">Layanan</label>
          <button type="button" onclick="toggleDropdown('serviceDropdown')" id="serviceTrigger" class="w-full px-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-xs sm:text-sm font-medium flex items-center justify-between text-slate-700 focus:outline-none focus:ring-2 focus:ring-[#0C2F31]/20 focus:border-[#0C2F31] transition text-left">
              <span id="serviceLabel" class="flex items-center gap-1.5">
                <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                <span>Pilih layanan</span>
              </span>
              <svg class="w-4 h-4 text-slate-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
          <div id="serviceDropdown"
            class="absolute z-20 left-0 right-0 mt-1 bg-white rounded-2xl shadow-xl border border-slate-200 p-2 hidden transition-all">
            <div onclick="selectService('Top Up PayPal')"
              class="px-3 py-2 rounded-xl text-xs cursor-pointer hover:bg-[#9EE96D]/15 hover:text-[#0C2F31] font-medium transition">
              Top Up PayPal
            </div>
            <div onclick="selectService('Convert PayPal')"
              class="px-3 py-2 rounded-xl text-xs cursor-pointer hover:bg-[#9EE96D]/15 hover:text-[#0C2F31] font-medium transition">
              Convert PayPal
            </div>
            <div onclick="selectService('Jasa Bayar PayPal')"
              class="px-3 py-2 rounded-xl text-xs cursor-pointer hover:bg-[#9EE96D]/15 hover:text-[#0C2F31] font-medium transition">
              Jasa Bayar PayPal
            </div>
          </div>
        </div>
        <div>
          <label class="block text-xs font-bold text-slate-700 mb-1.5">Testimoni</label>
          <textarea rows="4" placeholder="Tulis pengalaman Anda..." required class="w-full px-4 py-2.5 bg-slate-50/50 border border-slate-200 rounded-xl text-xs sm:text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-[#0C2F31]/20 focus:border-[#0C2F31] transition"></textarea>
        </div>
        <div class="pt-2">
          <button type="submit" class="w-full py-3 px-5 rounded-xl bg-[#9EE96D] hover:bg-[#8cd85d] text-[#0C2F31] font-black text-xs sm:text-sm shadow-md shadow-[#9EE96D]/30 active:scale-98 transition-all">
              Kirim Testimoni
            </button>
        </div>

</form>
    </div>

</div>
</main>

Related Examples

Dropdown select on hover
this example does not uses javascript

Alok

3 years ago

31.4k
Button Dropdown
Drop down button with only tailwind css using focus

Shivam Vishwakarma

1 year ago

2.7k
Sticky Navbar
A modern, feature-rich, and fully responsive navigation bar built with Tailwind CSS. This premium navbar includes a top contact bar, multi-level mega menus, live search with suggestions, mobile drawer navigation, nested accordion menus, authentication buttons, sticky header, and smooth interactions. Perfect for SaaS, corporate, startup, agency, eCommerce, legal, education, and business websites.

JUGENDRA GANGWAR

3 months ago

280
Dropdown select on hover
this example does not uses javascript

Thomas Taylor

2 years ago

3.3k
Material 3 Menu [Light]
A menu that conforms to Google's Material 3 design guidelines

Nick Girga

1 year ago

937
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Prajwal Hallale

3 years ago

20.5k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Indra

1 year ago

1.3k
Dropdown
hover dropdown with width of max-w-7xl

Bernard Omuse

2 years ago

2.2k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Rathanak Phan

1 year ago

2.4k
Dropdown profile
Using DaisyUI Based on: https://tailwindcomponents.com/component/dropdown-7

Dmitry

2 years ago

6.6k
Dropdown menu without using javascript
Open the dropdown menu on hover

Asher Wilde

3 years ago

20.3k
User List
List of users

Marcos Vinicios Nussemeyer

1 year ago

1.9k