patra-timer-v1

Include CSS in index.css file

#app { display: flex; position: relative; width: 100%; min-height: 100vh; justify-content: center; align-items: center; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); }

header
{
    display: flex;
    position: relative;
}

h1
{
    font-family: 'Droid Sans Mono', monospace;
    font-weight: lighter;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: white;
}


.flipClock
{
    display: flex;
    justify-content: space-between;
    width: 142px;
}

.flipUnitContainer
{
    display: block;
    position: relative;
    width: 42px;
    height: 35px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-perspective: 300px;
    perspective: 300px;
    background-color: white;
    border-radius: 3px;
    box-shadow: 0px 10px 10px -10px grey;
}

.upperCard, .lowerCard{
    display: flex;
    position: relative;
    justify-content: center;
    width: 100%;
    height: 50%;
    overflow: hidden;
    border: 1px solid whitesmoke;
}
    
.upperCard span {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}
.lowerCard span {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.lowerCard span, .upperCard span{
        font-size: 1em;
        font-family: 'Droid Sans Mono', monospace;
        font-weight: bold;
        color: #333333;
    }

.upperCard{
    align-items: flex-end;
    border-bottom: 0.5px solid whitesmoke;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}


.lowerCard
{
    align-items: flex-start;
    border-top: 0.5px solid whitesmoke;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
    
    

.flipCard{
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden;
}
    
.flipCard.unfold {
    top: 50%;
    align-items: flex-start;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    background-color: white;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 0.5px solid whitesmoke;
    border-top: 0.5px solid whitesmoke;
}
.unfold {
    -webkit-animation: unfold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
    animation: unfold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}   
.flipCard.unfold span {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.flipCard span {
    font-family: "Droid Sans Mono", monospace;
    font-size: 1em;
    font-weight: bold;
    color: #333333;
}
.flipCard.fold {
    top: 0%;
    align-items: flex-end;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    background-color: white;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 0.5px solid whitesmoke;
    border-bottom: 0.5px solid whitesmoke;
}    
        
    
.fold {
    -webkit-animation: fold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
    animation: fold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
        
.flipCard.fold span {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}



@keyframes fold

    {0%{
    
        transform: rotateX(0deg)
    }
    100%{
        transform: rotateX(-180deg)
    }
    }

@keyframes unfold

    {0%{
        transform: rotateX(180deg)
    }
    100%{
        transform: rotateX(0deg)
    }
}

Required Dependencies

$ npm install antd

Also include the following statement in index.tsx file.

import 'antd/dist/antd.css';