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 v3.4. It is responsive.

Widget

Author Jerome Soriano

Tailwind v3.4 2.7k 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

Number counter input

Prem..

3 years ago

16.9k
Simple count down timer

Gopi Yadav

3 years ago

15.7k
Music Player

Abhijit Sen

3 years ago

18.5k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k
pages / slides

MD Fardous Alom

1 year ago

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

Michael Andreuzza

2 years ago

3.2k
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

1 month ago

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

Joost Hietbrink

1 year ago

1.5k
Working reading progress bar
show how much of the page has been scrolled

Freja Jensen

3 years ago

13.4k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

8 months ago

1k
3D Count downer

Hasan AlDoy (McDoy)

6 months ago

321
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.

Prashant

4 years ago

15.6k

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.