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

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

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

Author:
S. Patel

2 years ago

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

Author:
Joost Hietbrink

3 months ago

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

Author:
Komal Jain

11 months ago

1.8k
pages / slides

Author:
MD Fardous Alom

5 months ago

736
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

13.7k
Number counter input

Author:
Prem..

2 years ago

15.5k
Interactive Kanban Board
Kanban board with draggable tasks

Author:
Quentin Rivers

8 months ago

1.2k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

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

Author:
Akmaljon Muhammadjonov

5 months ago

714
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

1.9k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Author:
Quentin Rivers

8 months ago

4.5k
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1