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

button in input tailwinds

Add Answer

Undefined answered on May 6, 2021 Popularity 10/10 Helpfulness 4/10

answer button in input tailwinds

related tailwind input

related tailwind form input

related Tailwind tag input

button in input tailwinds

Comment

<div class=" bg-gray-200">
    <div class="container h-screen flex justify-center items-center">
        <div class="relative">
            <div class="absolute top-4 left-3"> <i class="fa fa-search text-gray-400 z-20 hover:text-gray-500"></i> </div> <input type="text" class="h-14 w-96 pl-10 pr-20 rounded-lg z-0 focus:shadow focus:outline-none" placeholder="Search anything...">
            <div class="absolute top-2 right-2"> <button class="h-10 w-20 text-white rounded-lg bg-red-500 hover:bg-red-600">Search</button> </div>
        </div>
    </div>
</div>

Popularity 10/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: button html input

Link to this answer
Share Copy Link

Contributed on Mar 05 2022

Undefined

0 Answers Avg Quality 2/10

Closely Related Answers

tailwind input

Comment

<section class="flex justify-center mt-10">
    <input placeholder="Name"
        class="border-2 transition duration-500 placeholder-red-400 focus:placeholder-transparent border-red-400 w-4/12 py-2 text-center text-red-400 bg-transparent rounded-md focus:outline-none ">
</section>

Popularity 10/10 Helpfulness 5/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on May 06 2021

Undefined

0 Answers Avg Quality 2/10

tailwind form input

Comment

<form>
  <div class="mb-6">
    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label>
    <input type="email" id="email" class="shadow-sm 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 dark:shadow-sm-light" placeholder="name@flowbite.com" required>
  </div>
  <div class="mb-6">
    <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your password</label>
    <input type="password" id="password" class="shadow-sm 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 dark:shadow-sm-light" required>
  </div>
  <div class="mb-6">
    <label for="repeat-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Repeat password</label>
    <input type="password" id="repeat-password" class="shadow-sm 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 dark:shadow-sm-light" required>
  </div>
  <div class="flex items-start mb-6">
    <div class="flex items-center h-5">
      <input id="terms" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" required>
    </div>
    <label for="terms" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">I agree with the <a href="#" class="text-blue-600 hover:underline dark:text-blue-500">terms and conditions</a></label>
  </div>
  <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Register new account</button>
</form>

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: flowbite.com

Tags: input inpu

Link to this answer
Share Copy Link

Contributed on Jun 28 2022

Prickly Penguin

0 Answers Avg Quality 2/10

Tailwind tag input

Comment

{{-- On 'head'  --}}
	<link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />


{{-- inside your 'body'  --}}
	<div class="flex items-center justify-center mt-20">
    <div class="w-1/2">
        <label for="Tags" class="block mb-2 text-sm text-gray-600">Tags</label>
        <input type="text" class="w-full px-4 py-6 text-sm border border-gray-300 rounded outline-none" name="tags"
            value="Alpine Js, Tailwind CSS, PHP8.0" autofocus />
    </div>


{{-- Before </body> tag  --}}
    <script>
        // The DOM element you wish to replace with Tagify
        var input = document.querySelector('input[name=tags]');
        // initialize Tagify on the above input node reference
        new Tagify(input);
    </script>
    
{{-- Enjoy  --}}

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Oct 28 2022

Rasetz

0 Answers Avg Quality 2/10

button in input tailwinds

Contents

More Related Answers

button in input tailwinds

Closely Related Answers

tailwind input

tailwind form input

Tailwind tag input

Grepper

Documentation

Social

Legal

Contact

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