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

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

Ameth Galarcio

2 years ago

3.1k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

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

Komal Jain

2 years ago

3k
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

3k
Sticky fullpage pages / slides

Laurits

3 years ago

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

Alok

3 years ago

19.3k
pages / slides

MD Fardous Alom

1 year ago

2.3k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.3k
Detect Screen Breakpoints with Tailwind CSS

Prajwal Hallale

4 years ago

8.6k
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

Ameth Galarcio

2 years ago

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

Omer fils ELENGA

1 week ago

22
Simple count down timer

Alfredo Pineda Hernández

3 years ago

10.5k

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.