Home
Ameth Galarcio
Calculator

Calculator

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

This tailwind example is contributed by Ameth Galarcio, on 31-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are simulation,copy,dummy,miniature,like

Other Widget Mockup

Author Ameth Galarcio

1k

1

Fork Fullscreen

<div class="flex justify-center items-center">
    <div class="w-[270px]">
        <div class="w-full bg-gray-800 p-1 rounded-xl">
            <div class="flex flex-col h-24 bg-[#AACBAC] m-4 items-center justify-center rounded-lg">
                <div class="w-full text-sm pr-3 text-end">123</div>
                <input class="result" />
            </div>
            <div class="flex flex-wrap gap-3 justify-center items-center py-4">
                <button class="control">C</button>
                <button class="control">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#FFFfff" width="1.5rem">
                        <path d="M576 128c0-35.3-28.7-64-64-64H205.3c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7H512c35.3 0 64-28.7 64-64V128zm-305 47c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" /></svg>
                    </button>
                <button class="control" >%</button>
                <button class="operator" >x</button>
                <button class="num" >7</button>
                <button class="num" >8</button>
                <button class="num" >9</button>
                <button class="operator" >÷</button>
                <button class="num" >4</button>
                <button class="num" >5</button>
                <button class="num" >6</button>
                <button class="operator" >-</button>
                <button class="num" >3</button>
                <button class="num" >2</button>
                <button class="num" >1</button>
                <button class="operator" >+</button>
                <button class="num zero" >0</button>
                <button class="num" >.</button>
                <button class="operator" >=</button>
            </div>
        </div>
    </div>
</div>

Related Examples

Show credit card details

Author:
Manuela Bianka

2 years ago

10.7k
Simple count down timer

Author:
Gopi Yadav

2 years ago

14.1k
Sticky fullpage pages / slides

Author:
Laurits

1 year ago

13.3k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

8 months ago

1.3k
pages / slides

Author:
MD Fardous Alom

6 days ago

45
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

2 days ago

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

Author:
S. Patel

1 year ago

8.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

6 months ago

1.5k
iPhone 15 Mockup
The "Screen Content" div can be manipulated to have anything inside the screen.

Author:
Coastal UI

2 months ago

459
Responsive fullscreen youtube video

Author:
Anonymous

1 year ago

7.9k
Number counter input

Author:
Prem..

1 year ago

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

Author:
Prajwal Hallale

1 year ago

20.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1