JSFiddle - React, Tailwind, and code Playground

by csswizardry

HTML

<header id=page-head>
    
    <a href=# class=logo>Foo Corp logo</a>
    
    <div class=twitter>
        <a href=#>Follow me on twitter!</a>
    </div>
    
</header>

<p>Some page content here.</p>

<div class=twitter>
    <a href=#>Follow me on twitter!</a>
</div>

CSS

#page-head{
    background-color:#333;
    padding:1em;
    margin-bottom:1em;
    overflow:hidden; /* Clearfix */
}
#page-head,
    #page-head a{
        color:#fff;
    }

.logo{
    display:block;
    padding:1em;
}

.twitter{
    padding:1em;
    background-color:#f7f7f7;
}
.twitter,
    .twitter a,
    #page-head .twitter a{
        color:#333;
    }

JavaScript

/**
 * The reusable Twitter widget needs to be able to be placed anywhere and maintain its styling.
 */