JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<div id="dashboard" class="row">
    <a href="#alarm" class="col-4" style="background-color:#009"></a>
     <a href="#calendar" class="col-4" style="background-color:#C00"></a>
     <a href="#weather" class="col-4" style="background-color:#0C0"></a>

</div>
<div id="alarm" class="alarm row show">
    <a href="#dashboard" class="back-btn">back</a>
    <div class="col-12" style="background-color:#009; height:300px;"></div>
</div>
<div id="calendar" class="row show">
    <a href="#dashboard" class="back-btn">back</a>
    <div class="col-12" style="background-color:#C00; height:300px;"></div>
</div>
<div id="weather" class="row show">
    <a href="#dashboard" class="back-btn">back</a>
    <div class="col-12" style="background-color:#0C0; height:300px;"></div>
</div>

CSS

@charset"utf-8";
   /* CSS Document */
   * {
       box-sizing: border-box;
       margin:0;
       padding:0;
   }
   .row:after {
       content:"";
       clear: both;
       display: block;
   }
   [class*="col-"] {
       float: left;
       padding: 15px;
   }
   .col-1 {
       width: 8.33%;
   }
   .col-2 {
       width: 16.66%;
   }
   .col-3 {
       width: 25%;
   }
   .col-4 {
       width: 33.33%;
   }
   .col-5 {
       width: 41.66%;
   }
   .col-6 {
       width: 50%;
   }
   .col-7 {
       width: 58.33%;
   }
   .col-8 {
       width: 66.66%;
   }
   .col-9 {
       width: 75%;
   }
   .col-10 {
       width: 83.33%;
   }
   .col-11 {
       width: 91.66%;
   }
   .col-12 {
       width: 100%;
   }
   .show {
       display: none;
       position:absolute;
       width:100%;
       height:400px;
       top:0;
   }
   :target {
       display:block;
   }
   .back-btn {
       width:60px;
       height:40px;
       display:inline-block;
       z-index:20;
       background-color:orange;
       position:absolute;
       padding-top:10px;
       text-align:center;
       text-decoration:none;
       text-transform:uppercase;
       color:black;
   }