JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="container">
<div style="float: right;" class="name">Davide</div>
    <br style="clear: both;" />
<div id="panel-profile">
<a href="#"><img style="margin: 10px; float: left;" src="http://www.vbulletin.org/custompics/forum/avatars/avatar73879_2.gif" /></a>
<div style="float: left; margin-top: 10px;">
<a class="link-profile" href="#">Davide</a>
<div class="member-type">Membro Junior</div>
<br /><br />
<a href="#">La pagina del tuo profilo</a>
</div>
<br style="clear: both;" />
<table class="table" width="100%" border="0" cellpadding="6">
<tr>
<td><a href="#">Dettagli personali</a></td><td><a href="#">Il tuo flusso delle novitĂ </a></td>
</tr><tr>
<td><a href="#">Firma</a></td><td><a href="#">Le tue notifiche</a></td>
</tr><tr>
<td><a href="#">Informazioni di contatto</a></td><td><a href="#">Discussioni che stai seguendo</a></td>
</tr><tr>
<td><a href="#">Privacy</a></td><td><a href="#">I "Mi Piace" che hai ricevuto</a></td>
</tr><tr>
<td><a href="#">Preferenze notifiche</a></td><td><a href="#">I tuoi contenuti</a></td>
</tr><tr>
<td><a href="#">Avatar</a></td><td><a href="#">Utenti che segui</a></td>
</tr><tr>
<td><a href="#">Integrazione con facebook</a></td><td><a href="#">Persone che ignori</a></td>
</tr><tr>
<td><a href="#">Password</a></td><td><a href="#">Abbonamenti</a></td>
</tr>
</table>
<table class="table" width="100%" border="0" cellpadding="6">
<tr><td><input type="checkbox" checked="checked" /> Mostra stato</td><td><a href="#">Esci</a></td></tr>
</table>
<div class="last">
<textarea placeholder="A cosa stai pensando?..." rows="1" cols="40" style="overflow: hidden; width: 245px; margin: 0; resize: vertical;"></textarea>
</div>
</div>
</div>

CSS

.container {
    width: 280px;
    float: right;
}
.name {
    background: #6cb2e4 url(images/name-bg.png) repeat-x top left;
    height: 30px;
    width: 80px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #032a46;
    border-bottom: none;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    color: #032a46;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #add4f0;
    margin-bottom: none;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    right: -2px;
}

.name:hover {
    cursor: pointer;
    color: #065c99;
}

.link-profile, .link-profile:visited {
    font-size: 22px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

.member-type {
    color: #969696;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#panel-profile { 
    background: #fbfbfe; 
    width: 280px;
    border: 1px solid #032a46;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    display: none;
    margin-top: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #176093;
}

#panel-profile a:link, #panel-profile a:visited {
    color: #176093;
    text-decoration: none;
}

#panel-profile a:hover, #panel-profile a:active {
    color: #176093;
    text-decoration: underline;
}

.table {
    background: #eff6fb url(images/table-bg.png) repeat-x top left;
    border-top: 1px solid #d7edfc;
}

.table td:hover {
    background: #d7edfc;
    -moz-border-radius: 5px;
    -webkit-border-radius:...

JavaScript

$(".name").click(function () {
if ($("#panel-profile").is(":hidden")) {
$("#panel-profile").slideDown("slow");
} else {
$("#panel-profile").slideUp();
}
});