JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<ul>
    <li class="profile"><a href="#">Profile</a></li>
    <li class="messages">
        <a href="#">Messages</a>
        <ul>
            <li><a href="#">Gelen</a></li>
            <li><a href="#">Gelen</a></li>
            <li><a href="#">Gelen</a></li>
        </ul>
    </li>
    <li class="settings"><a href="#">Settings</a></li>
    <li class="logout"><a href="#">Logout</a></li>
</ul>


http://www.psdchat.com/wp-content/uploads/2013/10/freebie-flat-accordion.jpg

CSS

@font-face {
font-family: 'FontAwesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal; }







body { font-size:0.85em; background: url('http://3.bp.blogspot.com/-hB1R8z-r8G8/TwPXCpkGpcI/AAAAAAAAADk/K7GcTHKhRyY/s1600/Blurred+Vision.jpg') no-repeat  ; 
   background-size:cover
    text-align:center; margin:30px 0 0 0; padding:0;}

ul { list-style:none; margin:0 auto; padding:0; width:200px; 

    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow:    0px 0px 20px 0px rgba(0, 0, 0, 0.8);
box-shadow:         0px 0px 20px 0px rgba(0, 0, 0, 0.8); background:#e5654c;
font-family:arial; font-size:0.9em;
}


ul > li { position:relative  }

.profile:before {position:absolute; top:14px; left:15px; content:'\f007'; font-family:FontAwesome; color:#fff; font-size:1.1em;}

.messages:before {position:absolute; top:14px; left:15px; content:'\f003'; font-family:FontAwesome; color:#fff; font-size:1.1em;}

.settings:before {position:absolute; top:14px; left:15px; content:'\f013'; font-family:FontAwesome; color:#fff; font-size:1.1em;}

.logout:before {position:absolute; top:14px; left:15px; content:'\f13e'; font-family:FontAwesome; color:#fff; font-size:1.1em;}


ul > li > a {; color:#fff; text-decoration:none; padding:15px...