JSFiddle - React, Tailwind, and code Playground

by lakshmipathi

HTML

<div class="container">
    <!-- Backdrop -->
    <div class="container__overlay"></div>
<div class="rating">
    <button class="rating__star">☆</button>
    <button class="rating__star">☆</button>
    <button class="rating__star">☆</button>
    <button class="rating__star">☆</button>
    <button class="rating__star">★</button>
</div>

<div class="tabs">
    <!-- Active tab -->
    <div class="tabs__tab--active">
        Table1
    </div>

    <!-- Inactive tab -->
    <div class="tabs__tab--inactive">
        Table12
    </div>
</div>

<label class="label">
    <!-- The real checkbox -->
    <input type="checkbox" class="label__input" />

    <!-- The fake square -->
    <div class="label__square">
        <!-- The inner square -->
        <div class="label__checkbox label__square--selected"></div>
    </div>

    <!-- The text -->
    ...
</div>

    <!-- Sidebar -->
    <div class="container__sidebar">
        
    </div>
</div>

CSS

.container {
    /* Container takes full size */
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;

    z-index: 9999;
}

.container__overlay {
    /* Take full size */
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;

    /* User still can see the content of main page */
    background-color: rgba(0, 0, 0, 0.5);

    z-index: -1;
}

.container__sidebar {
    /* Take full height */
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 200px;

    /* Background */
    background-color: #fff;
}

.rating {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    flex-direction: row-reverse;

    font-size: 32px;
}

.rating__star:hover,
.rating__star:hover ~ .rating__star {
    color: transparent;
}

/*
Make all previous stars selected when hover on a star
Note that we use `flex-direction: row-reverse` on the container
*/
.rating__star:hover:before,
.rating__star:hover ~ .rating__star:before {
    color: #00449e;
    content: '\2605';
    left: 0;
    position: absolute;
}

.rating__star {
    /* Reset styles for button */
    background-color: transparent;
    border: transparent;
    margin: 0 2px;
    padding: 0;

    /* Used to position the hover state */
    position: relative;
}

.tabs {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
}

.tabs__tab--active {
    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    /* Hide the bottom border */
    border-bottom-color: transparent;

    /* Border radius */
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.tabs__tab--inactive {
    /* Has only the bottom border */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}