JSFiddle - React, Tailwind, and code Playground

by ArtJH

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="css/style.css">
	<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
	<title>KODEPEN</title>
</head>
<body>

	<div class="sidebar">
		<div class="logo">
			<a href="">
		 	<span class="style-KRAYPER">KODEPEN</span>
		 	<div class="border"></div>
		 </a>
		</div>
			<ul class="menu">
				<li class="menu1">
					<a href="#">Fresh</a>
					<div class="figure1"></div>
				</li>
				<li class="menu2">
					<a href="#">Interesting</a>
					<div class="figure2"></div>
				</li>
				<li class="menu3">
					<a href="#">Popular</a>
					<div class="figure3"></div>
				</li>
				<li class="menu4">
		    		<a href="#">Сategories</a>	
					<div class="figure4"></div>	
				</li>			
		</ul>
		<div class="input-wrapper" data-text="">
		  <input type="text" placeholder="Search…">          
		</div>
		<img src="img/telegram.png" alt="telegram" class="telegram pulse">
	</div>
	<div class="articles">
		<div class="box1">
		<a href="#"><img src="https://www.ixbt.com/img/n1/news/2020/3/2/thumb-1920-376494_large.png" alt="laptop" class="img1 opacity"></a>
		</div>
		<div class="heading-img1"><a href="#">What should a novice programmer do?</a></div>
		<div class="backgroundCategories backgroundLocationimg1">
		<div class="categories-img1">Categories: Programming</div>
		<div class="articleTitleImg1">
			Programming is a global part of the entire
			Internet and based on this, we can say 
			that the programmer rules the Internet...
		</div>
		</div>
		<div class="box2">
		<a href="#"><img src="https://www.ixbt.com/img/n1/news/2020/3/2/thumb-1920-376494_large.png" alt="business" class="img2 opacity"></a>
		</div>
		<div class="heading-img2"><a href="#">How to become confident?</a></div>
		<div class="backgroundCategories backgroundLocationimg2">
		<div class="categories-img2">Categories: Inner strength</div>
		<div...

CSS

body {
	background-color: #121214;
	margin: 0;
    padding: 0;
    overflow-x: hidden;
}

a {
	text-decoration: none;
	color: #fef1f2;
}

li {
	list-style-type: none;
}

.sidebar {
	position: fixed;
	top: 0;
	max-width: 16.66666666666667%;
	height: 1219px;
	box-shadow: 3px 4px 5px #000000;
	border: 1px solid #000000;
	background-color: #0e0e0e;
}

.logo {
	/* Style for "KRAYPER" */
	width: 227px;
	height: 38px;
	font-size: 43px;
	font-weight: 400;
	text-transform: uppercase;
    margin: 58px 57px;
}

.border {
	width: 86px;
	height: 8px;
	background-color: #fce2e2;
	margin-left: 57px;
	border-radius: 10px;
}

.menu {
	width: 117px;
	height: 22px;
	color: #fef1f2;
	font-family: Ubuntu;
	font-size: 23px;
	font-weight: 400;
	margin-top: 200px
}

.menu1 {
	margin: 30px 85px;
}

.menu2 {
	margin: 11px 61px;
    position: absolute;
}

.menu3 {
	margin: 79px 77px;
    position: absolute;
}

.menu4 {
	margin: 151px 60px;
    position: absolute;
}

.figure1 {
	width: 35px;
	height: 6px;
	background-color: #ff7e7e;
	border-radius: 5px;
	margin-left: 11px;
}

.figure2 {
	width: 35px;
	height: 6px;
	background-color: #ff7e7e;
	border-radius: 5px;
	margin-left: 36px;
}

.figure3 {
	width: 35px;
	height: 6px;
	background-color: #ff7e7e;
	border-radius: 5px;
	margin: 3px 20px;
}

.figure4 {
	width: 35px;
	height: 6px;
	background-color: #ff7e7e;
	border-radius: 5px;
	margin: 3px 37px;
}

.telegram {
	opacity: 0.8;
	margin: 300px 90px;
	width: 140px;
}

.telegram:hover {
	opacity: 0.9;
}

.pulse {
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 0 rgba(204,169,44, 0.4);
	animation: pulse 2s infinite;
}

.pulse:hover {
	animation: none;
}

.input-wrapper {
	width: 220px;
    margin: 520px 46px;
    position: absolute;
}

.input-wrapper::after {
  content: attr(data-text);
  font-size: 1.5rem;
  line-height: 0;
  height: 0;
  max-width: 100%;
  font-family: Roboto, Arial, sans-serif;
  border-bottom: 3px solid #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  height:...