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

1.6k

2

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

WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.5k
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.2k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

12.8k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

2 years ago

18.3k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

3 years ago

14.5k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

8 months ago

1.2k
pages / slides

Author:
MD Fardous Alom

8 months ago

1.2k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

3 years ago

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

Author:
S. Patel

2 years ago

9.4k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.4k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.1k
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.3k

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12