Breaking News: Grepper is joining You.com. Read the official announcement!

Tailwind CSS select

Add Answer

Zoltan Szogyenyi answered on June 8, 2021 Popularity 10/10 Helpfulness 7/10

answer Tailwind CSS select

related custom select tailwind css

related input select style in tailwind css

Tailwind CSS select

Comment

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select an option</label>
<select id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
  <option selected>Choose a country</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
</select>

Popularity 10/10 Helpfulness 7/10 Language html

Source: flowbite.com

Tags: html select tailwind-css

Link to this answer
Share Copy Link

Contributed on May 16 2022

Zoltan Szogyenyi

0 Answers Avg Quality 2/10

Closely Related Answers

custom select tailwind css

Comment

<div class="inline-block relative w-64">
  <select class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
    <option>Really long option that will likely overlap the chevron</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
  </div>
</div>

Popularity 10/10 Helpfulness 4/10 Language css

Source: v1.tailwindcss.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Jun 08 2021

Vivacious Vendace

0 Answers Avg Quality 2/10

input select style in tailwind css

Comment

.input,
  .select {
    @apply outline-none w-full border-b border-gray text-darkblue h-[38px] text-xl;
  }

<input className="input placeholder:text-darkblue" type="text" placeholder="Enter your hash rate" />
      <select className="select">
          <option value="">TH/s</option>
          <option value="">H/s</option>

          <option value="">KH/s</option>
          <option value="">MH/s</option>
          <option value="">GH/s</option>
      </select>

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 14 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Tailwind CSS select

Contents

More Related Answers

Tailwind CSS select

Closely Related Answers

custom select tailwind css

input select style in tailwind css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.