Simple dialpad

This tailwind example is contributed by Brandon D, on 12-Jun-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is copy

Author Brandon D

Tailwind v3.4 11.9k 11

Fork Fullscreen

<div class="flex flex-wrap rounded-xl bg-gray-300 max-w-sm mx-auto mt-24">
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">1</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">2</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">3</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">4</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">5</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">6</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">7</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">8</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">9</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">*</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">0</button>
    </div>
    <div class="w-1/3">
        <button class="w-full h-20 text-2xl text-gray-700 font-bold rounded-xl hover:bg-gray-400">#</button>
    </div>
</div>

Related Examples

background animation
background animation

Anonymous

3 years ago

53.2k
mailer
gmail style

МОЙДОЫР

11 months ago

780
tab4
table

Anonymous

1 month ago

18
Author Panels

Sherry Lynne

2 months ago

106
Native HTML Accordion
native html accordion summary details

Cristian

2 years ago

3k
Active Beauty Main Page

Maxim

1 year ago

1.9k
Reset Password UI
Reset password screen built with pure HTML and Tailwind CSS. Includes new password and confirm password fields, password strength indicator, security requirements checklist, inline SVG icons, and a premium glassmorphism SaaS interface.

JUGENDRA GANGWAR

1 month ago

217
Energy Efficiency Program - Oklahoma
Code for new IT proposal

Mario Williams

1 year ago

851
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k
Contact Page

Sedat Kumcu

2 years ago

2.1k
Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Bishnu Thapa

2 years ago

3.7k
Lifetime Access (iOS 26 Style)
Lifetime Access (iOS 26 Style)

Tanvir Hasan Bappy (Tanvir)

10 months ago

732

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.