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

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

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

[class=twitter]{
    padding:1em;
    background-color:#f7f7f7;
}
[class=twitter],
    [class=twitter] a{
        color:#333;
    }

JavaScript

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