JSFiddle - React, Tailwind, and code Playground

by mohammad alhor

HTML

<link rel="stylesheet" href="https://a3p-mohammadalhor.googlecode.com/svn/trunk/font-ge_dinar.css">
<aside class='sidebar'>
  <div class='main-nav'>
    <ul>
      <li class='logo'>
        <a>القائمة</a>
        <span class='entypo-list'></span>
      </li>
      <li>
        <a href='#' >الرئيسية</a>
        <span class='entypo-home'></span>
      </li>
      <li>
        <a href='#' >مثال</a>
        <span class='entypo-gauge'></span>
      </li>
      <li>
        <a href='#' >مثال</a>
        <span class='entypo-chart-line'></span>
      </li>
      <li>
        <a href='http://arabic3professional.blogspot.com/' >المصدر</a>
        <span class='entypo-rocket'></span>
      </li>
      <li>
        <a href='#' >مثال</a>
        <span class='entypo-vcard'></span>
      </li>
      <li>
        <a href='#' >إعدادات</a>
        <span class='entypo-cog'></span>
      </li>
    </ul>
  </div>
</aside>
<section class='page'>
  <div class='content'>
    <h1>احتراف عربي</h1>
    <p>Lهذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل
هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من
 الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى
مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع،</p>
  </div>
</section>
<section class='page color-1'>
  <div class='content'>
    <h1 >إحتراف عربي</h1>
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل
هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من
 الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى
مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن...

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700|Electrolize);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
    text-align: right;
    
}
a:link{color:#fff;text-decoration:none;transition:all 400ms ease-in-out}
a:visited{color:#fff;text-decoration:none}
body {
  font-family: Electrolize,ge_dinar_tworegular;
  font-size: 1em;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background-color: #252a32;
  color: #fff;
  overflow: hidden;
  transition: width .3s ease-in-out;
  z-index: 100;
}
.sidebar:hover {
  width: 200px;
}
.sidebar:hover .main-nav ul li a {
  opacity: 1;
  right: 0;
  transition-delay: .2s;
}
.sidebar .main-nav ul li {
  min-height: 50px;
  line-height: 50px;
  position: relative;
  border-bottom: 1px solid #303641;
  transition: all .3s ease-in-out;
}
.sidebar .main-nav ul li.logo a {
  text-transform: uppercase;
  font-weight: 800;
}

.sidebar .main-nav ul li.logo span:before {
  color: #ea4c89;
  font-size: 1.5em;
}
.sidebar .main-nav ul li.logo + li {
  border-top: 1px solid #303641;
}
.sidebar .main-nav ul li a {
  display: block;
  padding-right: 50px;
  position: relative;
  right: 15px;
  opacity: 0;
  transition: all .3s ease-in-out;
  transition-delay: 0s;
  cursor: pointer;
  font-weight: 300;
}
.sidebar .main-nav ul li span {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
  text-align: center;
}
.sidebar .main-nav ul li span:before {
  font-size: 1.25em;
  transition: all .3s ease-in-out;
}
.sidebar .main-nav ul li:hover {
  background-color: #1b1e24;
}
.sidebar .main-nav ul li:hover span:before {
  color: #ea4c89;
}

.page {
  position: relative;
  padding-right: 50px;
}
.page.color-1 {
  background-color: #3498db;
  color: #fff;
}
.page...