Home
Jerome Soriano
Dialpad with display text

Dialpad with display text

A simple dialpad fork from @brandon and added display text and changed color

This tailwind example is contributed by Jerome Soriano, on 01-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Widget

Author Jerome Soriano

2k

4

Fork Fullscreen

<div class="bg-green-200 py-2">
  <div class="bg-green-200 mt-6">
    <div class="rounded bg-green-100 max-w-sm my-2 mx-0 sm:mx-auto">
      <div class="p-3 text-xl ml-4">
        <input type="text" class="w-full bg-green-100 focus:border-green-300 focus:bg-green-100 focus:outline-green-300" value="0912123123109121231231091212312310912123123109121231231"/>
      </div>
    </div>

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

Related Examples

partql
partql

Author:
sh22gr

3 weeks ago

118
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Author:
Prajwal Hallale

2 years ago

22k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

2.7k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.6k
PartLar subscription widget
part

Author:
Anonymous

3 weeks ago

7
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

3 years ago

8.5k
Simple count down timer

Author:
Gopi Yadav

3 years ago

15.3k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

1 year ago

2.7k
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Author:
Michael Andreuzza

1 year ago

2.5k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.9k
Code card with copy Button
this example uses clipboard.js to copy the code

Author:
Akmaljon Muhammadjonov

1 year ago

1.5k
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

Author:
S. Patel

2 years ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

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 Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12