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

829

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

1 year ago

10.3k
Simple count down timer

Author:
Gopi Yadav

1 year ago

13.9k
Sticky fullpage pages / slides

Author:
Laurits

1 year ago

12.7k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

6 months ago

903
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

4 months ago

1.1k
Product hunt showcase

Author:
Lukas Müller

1 year ago

11.1k
Stepper - Without Buttons

Author:
farisubuntu

3 months ago

362
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

1 month ago

286
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Author:
Jerome Soriano

1 month ago

394
Tablet device mockup

Author:
Prajwal Hallale

2 years ago

8.8k
Contact Page

Author:
Sedat Kumcu

3 weeks ago

117
Number counter input

Author:
Prem..

1 year ago

14.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8