JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<script src="http://semantic-ui.com/build/packaged/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/noisy/1.1.1/jquery.noisy.min.js"></script>
<nav class="ui fixed small menu" role="main">
    <div class="application">
        <a class="item" href="#home">
            <i class="home icon"></i>
            Home
        </a>

        <a class="item" href="#hot-posts">
            <i class="fire icon"></i>
            Hot
        </a>

        <a class="item" href="#trending-posts">
            <i class="basic chart icon"></i>
            Trending
        </a>

        <a class="item" href="#fresh-posts">
            <i class="lemon icon"></i>
            Fresh
        </a>

        <figure class="item">
            <div class="ui action input">
                <input type="text" placeholder="Search...">
                <a class="ui icon button">
                    <i class="search icon"></i>
                </a>
            </div>
        </figure>

        <nav class="right menu">
            <a class="item" href="#login">
                <i class="sign in icon"></i>
                Sign In
            </a>

            <a class="item" href="#create-profile">
                <i class="signup icon"></i>
                Sign Up
            </a>

            <div class="item">
                <a class="ui icon labeled button red" href="#create-post">
                    <i class="add sign box icon"></i>
                    Add
                </a>
            </div>
        </nav>
    </div>
</nav>

CSS

html, body {
    height: 100%;
}
html, body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}