JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" >
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" >
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div class="wrapper">
        <div class="header"></div>
        <a href="#"><div class="menu1">
            <span class="link">The Main</span>
        </div></a>
        <a href="#"><div class="menu2">
            <span class="link">Articles</span>
        </div></a>
        <a href="#"><div class="menu3">
        <span class="link">About me</span>
        </div></a>
        <div class="content-wrapper">
            <div class="second-main">
        <div class="left"> 
                <div class="article1 back">
                    <div class="article-wrapper1"><h1><a href="#">Article title</a></h1>
                    <a href="#"><img src="images/article1.jpg" alt="" ></a>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsuhat a ng established fact that a reader will be distracteact that a reader will be distracted by the readable com is that it has established fact t</p>
                    <a href="#"><div class="read-more">
                    </div></a>
                    </div>
                </div>
                <div class="read-also0">
                    <div class="read-style">
                <h2>Tags</h2>
                </div>
                    <div class="last tags">
                        <a href="#">gold</a> <a href="#">car</a> <a href="#">rock</a> <a href="#">island</a> <a href="#">slides</a> <a href="#">sites</a> <a href="#">girls</a> <a href="#">money</a> <a href="#">shop</a> <a href="#">close</a>
                    </div>
                </div>
                
                <div...

CSS

a:hover{
color:#CCCCCC;
}

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

body{
background:url(../images/bg.jpg) repeat-x #000;
}

.wrapper{
    width:1000px;
    position:relative;
    margin:0 auto;
}

.content-wrapper{
padding-top:220px;
}

.second-main{
    height:1000px;
    width:1000px;
    background:#000;
    border-radius:50%;
    position:relative;
    z-index:2;
    box-shadow: 0 5px  25px  1px #fff;
}
.header{
    height:700px;
    width:700px;
    background:#96A396;
    margin: 0 auto;
    border-radius:50%;
    position:absolute;
    top:0px;
    left:150px;
    z-index:1;
    box-shadow: 0 0 50px  10px #C1FFA7 inset,  0 0 10px  2px #000;
    opacity:0.5;
}

.link{
display:inline-block;
padding: 26px 0 0 13px;

}
.menu1{
    height:100px;
    width:100px;
    background:#0F080F;
    border-radius:50%;
    position:absolute;
    left:250px;
    top:235px;
    z-index:1;
    box-shadow: 0 0 50px  30px #0F080F inset;
    border:2px solid #E2E1B6;
    text-shadow: #ACA700 3px 3px 2px;
    -moz-transform: rotate(-25deg); /* Для Firefox */
    -ms-transform: rotate(-25deg); /* Для IE */
    -webkit-transform: rotate(-25deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(-25deg); /* Для Opera */
    transform: rotate(-25deg);
}
.menu1:hover{
    top:208px;
    box-shadow: 0 0 100px  30px #B0F265,0 0 50px  30px #0F080F inset ;
    
}
.menu2{
    height:100px;
    width:100px;
    background:#0F080F;
    border-radius:50%;
    position:absolute;
    left:450px;
    top:190px;
    z-index:1;
    border:2px solid #E2E1B6;
    box-shadow: 0 0 50px  30px #0F080F inset;
    text-shadow: #ACA700 3px 3px 2px;
}
.menu2:hover{
    top:168px;
    box-shadow: 0 0 100px  30px #B0F265,0 0 50px  30px #0F080F inset ;
}
.menu3{
    height:100px;
    width:100px;
    background:#0F080F;
    border-radius:50%;
    position:absolute;
    left:650px;
    top:237px;
    z-index:1;
    box-shadow: 0 0 50px  30px #0F080F inset;
    text-shadow: #ACA700 3px 3px 2px;
   ...