CODEWITHSUNDEEP
cssformstailwind-css
Himanshu Jain
Himanshu Jain

Reputation: 148

how to create submit button inside input field in tailwindcss

I want to create a search box with a button inside input field using tailwindcss. Here is the image of design which created for this search box:

Search Box Image

Upvotes: 1

Views: 8507

Answers (1)

Himanshu Jain
Himanshu Jain

Reputation: 148

Here is the code which I have created.

    <div class="hero bg-gredient-dark h-400px flex flex-col px-2">
        <div class="search-box mx-auto my-auto w-full sm:w-full md:w-full lg:w-3/4 xl:w-3/4">
            <form class="flex flex-row">
                <span
                    class="flex items-center bg-gray-100 rounded rounded-r-none border-0 px-3 font-bold text-grey-100">📓</span>
                <input
                    class="h-16 bg-gray-100 text-grey-darker py-2 font-normal text-grey-darkest border border-gray-100 font-bold w-full py-1 px-2 outline-none text-lg text-gray-600"
                    type="text" placeholder="What do you want to learn?">
                <span
                    class="flex items-center bg-gray-100 rounded rounded-l-none border-0 px-3 font-bold text-grey-100">
                    <button
                        class="bg-gredient-dark hover:bg-gredient-light text-lg text-white font-bold py-3 px-6 rounded">Search</button>
                </span>
            </form>
        </div>
    </div>

Below is the css which I used to create that

    .bg-gredient-dark{
    background: rgb(18, 127, 191);
    background: -moz-linear-gradient(130deg, rgba(18, 127, 191, 1) 0%, rgba(3, 83, 136, 1) 100%);
    background: -webkit-linear-gradient(130deg, rgba(18, 127, 191, 1) 0%, rgba(3, 83, 136, 1) 100%);
    background: linear-gradient(130deg, rgba(18, 127, 191, 1) 0%, rgba(3, 83, 136, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#127fbf", endColorstr="#035388", GradientType=1);}

    .h-400px {
    height: 25rem;}

Upvotes: 4

Related Questions