JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<link rel="stylesheet" href="http://www.maxumi.co.uk/wp-content/themes/maxumi/css/maxumi-style.css">
<link rel="stylesheet" href="http://www.maxumi.co.uk/wp-content/themes/maxumi/style.css">
<div id="wrapper" class="hfeed">    
<header class="header">
        <section id="masthead">
            <div id="branding" role="banner">
                <hgroup>
                                        <h1 id="site-title">
                    <span>
                        <a href="http://www.maxumi.co.uk/" title="Maxumi Magazine" rel="home"><img src="http://www.maxumi.co.uk/wp-content/uploads/maxumilogo.jpg" alt="bg-image"></a>
                    </span>                                                            
                    </h1>
                    <div class="site-description"><form role="search" method="get" id="searchform" action="http://www.maxumi.co.uk/" >
    <div><label class="screen-reader-text" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
    </div>
    </form></div>
                    <div class="header-social">
                    <p>Follow us</p>
                    <a href="http://www.maxumi.co.uk/" title="Maxumi Magazine" class="header-tw">Twitter</a>
     <a href="http://www.maxumi.co.uk/" title="Maxumi Magazine" class="header-fb">Facebook</a>
                </div>                    
               </hgroup>
            </div><!-- #branding -->
            <nav id="access" role="navigation">
                              <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
                                <div class="menu-header"><ul id="menu-navigation" class="menu"><li id="menu-item-2449" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2449"><a href="http://www.maxumi.co.uk/category/news/">News</a></li>
<li id="menu-item-2450" class="menu-item...

CSS

div.header-social {
    position:absolute;
    right:0;
    top:100px;
    width:241px;    
}

div.header-social p {
    float:left; 
    display:block;
    font-weight:800;   
    padding:7px;
    padding-right:18px;
}

a.header-fb,a.header-tw {
    color:white;
    text-decoration:none;
    text-shadow:none;
    font-weight:800;
    display:block;
    padding:5px;
    background:#133783;
    border:1px solid #132854;    
    border-bottom:5px solid #132854;
    border-left:4px solid #3B5998;
    width:80px;
    float:left;
    text-align:center;
}

a.header-fb:hover {    
    background:#133783;
    border-bottom:2px solid #132854;
    border-left:2px solid #3B5998;
    margin-top:4px;
    margin-right:2px;
}
a.header-tw {
    background:#33ccff;
    border:1px solid #579db4;        
    border-bottom:5px solid #125166;
    border-left:4px solid #579db4;
    margin-right:5px;
    width:48px;
}

a.header-tw:hover {    
    border-bottom:2px solid #125166;
    border-left:2px solid #579db4;
    margin-top:4px;
    margin-right:7px;
}