JSFiddle - React, Tailwind, and code Playground

by ayana tech

HTML

<body>
    <center>
<div class="box_content">
<ol class="rounded-list">
<li>
<ol>
<li style="text-align: right; padding-bottom: 2px; padding-top: 8px;">معاينه محمد ابوعيانه</li>
    <li style="text-align: right; padding-bottom: 2px; padding-top: 8px;">معاينه محمد ابوعيانه</li>
    <li style="text-align: right; padding-bottom: 2px; padding-top: 8px;">معاينه محمد ابوعيانه</li>
    <li style="text-align: right; padding-bottom: 2px; padding-top: 8px;">معاينه محمد ابوعيانه</li>
    <li style="text-align: right; padding-bottom: 2px; padding-top: 8px;">معاينه محمد ابوعيانه</li>
    <li style="text-align: right; padding-bottom: 2px; padding-top: 8px;">معاينه محمد ابوعيانه</li>
</ol>
</li>
</ol>
</div>
    </center>
    <div class='ayana'>
        <a href='http://ayanatech.blogspot.com'>العوده للموضوع<a></a>
    </div>
</body>

CSS

body {
background-image: url(http://3.bp.blogspot.com/-b2Ik3ScjBJU/UZ036Z4myNI/AAAAAAAAGZE/wGN7FYWsB7g/s1600/bg.jpg);
    font-size: 16px;
    color: #444;
    background-attachment: fixed;
}
.sb .box_content{color:#A6A6A6; padding:10px; margin:1px; border-bottom-left-radius:4px; border-bottom-right-radius:4px}
ol{counter-reset:li; list-style:none outside none; font:15px "trebuchet MS","lucida sans"; padding:0; margin-right:-4px; margin-top:0; margin-bottom:0}
ol{list-style:none outside none; font:15px "trebuchet MS","lucida sans"}
ol ol{margin:0 2em 0 0}
.rounded-list ol li:before{counter-increment:li; position:absolute; right:-1.3em; top:50%; margin-top:-1.3em; height:2em; width:2em; line-height:2em; border:0.3em solid #117E19; text-align:center; font-weight:bold; border-radius:2em; transition:all 0.3s ease-out 0s; content:counter(li,decimal); background-color:#087A1F; box-shadow:0px 3px 6px rgba(0,0,0,0.9),0px 0px 3px rgba(0,0,0,0.9) inset; color:#fff !important; font-family:a}
.rounded-list ol li{font-family:ge_dinar; display:block; padding:0.4em 2em 0.4em 0.4em; margin:0.5em 0px; background:rgba(9,129,33,0.31); color:#0f3; text-decoration:none; border-radius:20px; transition:all 0.3s ease-out 0s; position:relative; height:27px; cursor:default}
.rounded-list ol li:hover:before{-webkit-transform:rotate(360deg); box-shadow:1px 1px 100px #0f3; text-shadow:1px 1px 100px #004543; border:0.3em solid #0f3; box-shadow:0px 3px 6px rgba(0,0,0,0.9),0px 0px 3px rgba(0,0,0,0.9) inset; -moz-box-shadow:0 0 10px #0f3,0 0 30px #0f3,0 0 50px #0f3,0 1px 3px #000!important; -webkit-box-shadow:0 0 10px #C6EB04,0 0 30px #C6EB04,0 0 50px #C6EB04,0 1px 3px #000!important; box-shadow:0 4px 6px rgba(0,0,0,0.25),0 0 10px #C6EB04,0 0 30px #C6EB04,0 0 50px #C6EB04,0 1px 3px #000!important}
.rounded-list ol li:hover{background-color:#0f3; color:#000 !important}

/*-----Font Face-----*/
@font-face {
font-family: 'GESSTwoMediumRegular';
src:...