Home
Tamaz gogitidze
damatebis forma

damatebis forma

This tailwind example is contributed by Tamaz gogitidze, on 17-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Form Contact us

Author Tamaz gogitidze

2.1k

Fork Fullscreen

</div>
<form class="md:col-span-8 p-10">
    <div class="flex flex-wrap -mx-3 mb-6">
        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-first-name">
                        სახელი
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-first-name" type="text" placeholder="გია">
        </div>
        <div class="w-full md:w-1/2 px-3">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-last-name">
                        გვარი
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-last-name" type="text" placeholder="მურმანიძე">
        </div>
    </div>
    </div>
    </div>
<form class="md:col-span-8 p-10">
    <div class="flex flex-wrap -mx-3 mb-6">
        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-first-name">
                        ტელეფონი
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-first-name" type="text" placeholder="--- -- -- --">
        </div>
        <div class="w-full md:w-1/2 px-3">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-last-name">
                        პირადი ნომერი
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-last-name" type="text" placeholder="-----------">
        </div>
    </div>
    </div>
    </div>
<form class="md:col-span-8 p-10">
    <div class="flex flex-wrap -mx-3 mb-6">
        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-first-name">
                        მისამართი
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-first-name" type="text" placeholder="ბათუმი">
        </div>
        <div class="w-full md:w-1/2 px-3">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-last-name">
                        ელ-ფოსტა
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-last-name" type="text" placeholder="*****@cmp.idelapps.dev">
        </div>
    </div>
    </div>
    </div>
<form class="md:col-span-8 p-10">
    <div class="flex flex-wrap -mx-3 mb-6">
        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-first-name">
                        დაბდების დღე
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-first-name" type="text" placeholder="09.17.2024">
        </div>
        <div class="w-full md:w-1/2 px-3">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-last-name">
                        მოქლაქე
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-last-name" type="text" placeholder="ბათუმი">
        </div>
    </div>
    </div>
    </div>
<form class="md:col-span-8 p-10">
    <div class="flex flex-wrap -mx-3 mb-6">
        <div class="w-full md:w-1/1 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                        for="grid-first-name">
                        <center>საიდან გაიგე ჩვენს შესახებ</center>
                    </label>
            <input
                        class="appearance-none block w-full bg-[#F5EDED] text-gray-700 border-e-60  border-natural-950 rounded-full  py-3 px-4 mb-3 leading-tight focus:outline focus:bg-black"
                        id="grid-first-name" type="text" style="text-align: center;" placeholder="გთხოვ მიუთითოთ ერთ-ერთი პასუხი">
        </div>

<button class="w-full  rounded-full bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
  პაციენტის დამატება
</button>

Related Examples