JSFiddle - React, Tailwind, and code Playground

by Wordssaysalot

HTML

<html>
<link rel="stylesheet" type="text/css" href="style.css">

<body>
    <div class="form">
        <div class="grid-container">
            <div class="display">
                <div class="inner-display">
                    <input class="inner-text" value="" />
                </div>
            </div>
            <div class="equate">
                <div class="button">
                    <div class="inner-button" id="equate">
                        <i class="fas fa-equals"></i>
                    </div>
                </div>
            </div>
            <div class="button">
                <div class="inner-button orange" id="clear">
                    AC
                </div>
            </div>
            <div class="button">
                <div class="inner-button orange">
                    /
                </div>
            </div>
            <div class="button">
                <div class="inner-button orange">
                    x
                </div>
            </div>
            <div class="button">
                <div class="inner-button orange" id="backspace">
                    <i class="fas fa-backspace"></i>
                </div>
            </div>
            <div class="button">
                <div class="inner-button">
                    7
                </div>
            </div>
            <div class="button">
                <div class="inner-button">
                    8
                </div>
            </div>
            <div class="button">
                <div class="inner-button">
                    9
                </div>
            </div>
            <div class="button">
                <div class="inner-button orange">
                    -
                </div>
            </div>
            <div class="button">
                <div class="inner-button">
                    4
                </div>
            </div>
            <div class="button">
                <div class="inner-button">
      ...

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css");

body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100%;
    background: transparent;

}

* {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

.form {
    width: 264px;
    height: 384px;
    background: #3A4655;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    box-shadow: -10px 10px 20px rgba(10, 10, 7, 0.2), 10px -10px 20px rgba(10, 10, 7, 0.2), -10px -10px 20px rgba(40, 38, 27, 0.9), 10px 10px 25px rgba(10, 10, 7, 0.9), inset 1px 1px 2px rgba(40, 38, 27, 0.3), inset -1px -1px 2px rgba(10, 10, 7, 0.5);
}


.grid-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    margin: 6px;
    gap: 6px 6px;
    grid-template-areas:
        "display display display display"
        "display display display display"
        ". . . ."
        ". . . ."
        ". . . ."
        ". . . equate"
        ". . . equate";
}

.display {
    grid-area: display;
}

.equate {
    grid-area: equate;
}



.display,
.button,
.equate {
    display: flex;
    align-items: center;
    justify-content: center;

}

.inner-display {
    width: 236px;
    height: 80px;
    background: #3A4655;
    border-radius: 20px;
    text-align: right;
    display: flex;
    flex-direction: column-reverse;
	
}

.inner-text {
    height: 80px;
    text-align: right;
    background: #3A4655;
    font-family: Poppins;
    font-size: 24px;
    margin:...