Home
Brandon D
Simple dialpad

Simple dialpad

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

Other Clone

Author Brandon D

10k

9

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

Author:
Anonymous

1 year ago

33.1k
Privacy policy page template

Author:
Sameer Sultana

1 year ago

14.9k
Profile Form
Progressive Profile Form

Author:
Samuel Abera

5 months ago

1.6k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

3 months ago

499
blockquote

Author:
Freja Jensen

1 year ago

8.2k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

3 months ago

797
Tailwind invoice example

Author:
Elijah Davis

1 year ago

15.7k
Upvote downvote buttons

Author:
Lucas Martinez

1 year ago

9.9k
Your upside-down text

Author:
Isabella Kowalski

1 year ago

11.4k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

1 year ago

7.8k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

1 year ago

6.8k
Calculator
A Basic Calculator

Author:
Debbie F

2 months ago

289

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8