JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="btn"></div>
<div class="btn hard"></div>
<div class="btn veryhard"></div>
<div class="btn square"></div>
<div class="btn disabled"></div>
<div class="btn on"></div>

<hr>

<div class="pager">
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
</div>

<hr>

<div class="seg">
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
</div>

<hr>

<div class="tab">
    <div class="btn hard"></div>
    <div class="btn"></div>
    <div class="btn"></div>
    <div class="btn"></div>
</div>
<div class="bar"></div>

<div class="box">
    <div class="tab">
        <div class="btn hard"></div>
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
    </div>
</div>

CSS

/* html{zoom: 2;} */
div+div{
}

.btn{
    display: inline-block;
    box-sizing: border-box;
    width: 100px;
    height: 50px;
    border: 2px solid #04082C;
    border-radius: 8px;
    line-height: 1;
    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0, 0) 5%,
            rgba(0,0,0, .5) 46%,
            rgba(0,0,0, .5) 54%,
            rgba(0,0,0, 0) 95%
        ),
        linear-gradient(
            to right,
            rgba(0,0,0, 0) 50%,
            rgba(0,0,0, .08) 50%
        );
    background-color: #696969;
    -webkit-background-size: auto, 8px 100%;
    background-size: auto, 8px 100%;
    box-shadow: 0 0 0 1px white inset;
    /* -webkit-filter: brightness(1.3) contrast(1.2) grayscale(0) hue-rotate(0deg) invert(0.1) saturate(1.8) sepia(0); */
}

/* .btn::before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
} */

.btn.hard{
    background-color: #55AEBF;
}

.btn.veryhard{
    background-color: #D25038;
}

.btn.on{
    background-color: #E53EC2;
}

.btn.disabled{
    background-image: none;
}

.pager,
.seg,
.tab{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: center;
  align-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.pager .btn,
.seg .btn,
.tab .btn{
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    -webkit-align-self: stretch;
    align-self: stretch;
    height: auto;
}


.pager{
    height: 50px;
}
.pager .btn{
    width: 50px;
    border-radius: 3px;
    border-top-width: 1px;
    border-bottom-width: 1px;
}
.pager .btn:first-child{
    border-right-width: 1px;
    border-radius: 8px 3px 3px 8px;
}
.pager...