JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <LINK REL=StyleSheet HREF="main.css" TYPE="text/css" MEDIA=screen></head>
<body>
    <div class="full">
    <div class="autofill" id="background">
    
    
        <div class="topbar">
            <img class="logo" src="/icons/glacier.png">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            <div class="nav">
                <a href="#"><i class="fa fa-fw fa-align-justify"></i></a>
                <a href="#"><i class="fa fa-fw fa-wifi"></i></a>
                <a href="#"><i class="fa fa-fw fa-user"></i></a>
                <a class="active" href="#"><i class="fa fa-fw fa-gear"></i></a>
            </div>
        </div>
        <div class="body"></div>
    
    
    </div>
    </div>
</body>
</html>

CSS

.full {
  background-color: black;
  color: white;
  width: 300px;
  height: 400px;
  border-radius: 20px;
  transition: 1s ease;  
}
.autofill {
  padding: 10px;
}
.topbar {
  overflow: hidden;
  width: 100%;
  height: 50px;
  background-color: #131218;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  align-items: center;
 
}
.body {
  display: block;
  width: 100%;
  height: 330px;
  background-color: blue;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

img {
  height: 50px;
  padding: 5px;
  border-radius: 200px;
  float: left;
  will-change: transform;
  animation: logofloat 1s ease-in-out infinite alternate;
}

@keyframes logofloat {
   from {
       transform: translateY(5px);
   }
   to {
       transform: translateY(15px);
   }
}
a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  align-items: center;
  float: left;
  display: block;
  margin-right: 10px;
  background-color: #25242B;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}

i {
  padding: 5px;
  color: #4D4A58;
}

a:hover:not(.active) {
  background-color: grey;
}

a:not(.active) {
  color: white;
}

.active {
  background-image: linear-gradient(to right, #5433FF , #20BDFF , #6FB1FC);
}