JSFiddle - React, Tailwind, and code Playground

by SkeLLLa

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
  <head>
    <link type="text/css" rel="stylesheet" media="all" href="style.css">
    <title>example</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
  </head>
  <body>
    <div class="wrapper">
      <div class="title"><a href="#">Title</a></div>
      <div class="container">
    <ul class="menu" rel="sam1">
      <li id="miMain" class="active mi"><a href="#">Menu Item 1</a></li>
      <li id="miSettings" class="mi"><a href="#">Menu Item 2</a></li>
      <li id="miStats" class="mi"><a href="#">Menu Item 3</a></li>
    </ul>
      </div>
    </div>
    <div class="content">
    <div class="left"><br></div>
    <div class="right"><br></div>
    <div class="center">
      <div class="pageContent">
        <div class="pageTitle">Lorem ipsum</div>
        <div class="pageText">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut ligula vel velit suscipit interdum eu a erat. Cras fermentum pellentesque aliquet. Integer adipiscing ipsum vulputate leo cursus scelerisque. Aenean scelerisque imperdiet urna nec suscipit. Sed placerat eleifend tincidunt. Quisque eget est elit, sed sagittis lacus. Sed vehicula justo fermentum arcu rutrum nec egestas neque volutpat.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus auctor molestie tortor, nec laoreet risus lacinia sit amet. Duis posuere pharetra rutrum. Maecenas enim turpis, hendrerit id condimentum nec, condimentum sed risus. Maecenas vel nunc massa, vel tincidunt dolor. Nulla lacinia hendrerit sagittis. Suspendisse cursus laoreet aliquam. Quisque id lectus ipsum. Cras vestibulum luctus ipsum in euismod. Donec vitae turpis turpis.

Aenean nunc magna, adipiscing quis cursus tincidunt, vulputate at justo. Pellentesque habitant morbi tristique senectus et netus...

CSS

body {
    font-family: Arial;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.4);
    text-align:center;
}

.wrapper {
    display:block;
    width: 80%;
    min-width:900px;
    height: 30px;
    background: rgb(242,242,242); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(211,211,211,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(100%,rgba(211,211,211,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(211,211,211,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(211,211,211,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(211,211,211,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(242,242,242,1) 0%,rgba(211,211,211,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
    position: relative;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    margin-left:auto;
    margin-right:auto;
}

.title {
    display:inline;
    float:left;
    line-height:30px;
    text-align:middle;
    font-size: 14px;
    padding-left:25px;
    padding-right:25px;
}

.title:hover {
    background:#dedede;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: rgb(211,211,211); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(211,211,211,1) 0%, rgba(147,147,147,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,211,211,1)), color-stop(100%,rgba(147,147,147,1))); /*...