JSFiddle - React, Tailwind, and code Playground

by sanaullah Rais

HTML

<body class="en">
    <div id="content-wrapper">
        <header>
            <div id="navbar-first" class="clearfix">
                <div class="site-content-wrapper">
                    <div id="main-logo">
                        <a href="/" title="Home"><span class="sprite logo"></span></a>
                    </div>
                    <div id="language-switch">
                        <div class="language-current gradient">
                            <span class="sprite flag-en"></span><span>English</span><span class="sprite dropdown-blue"></span>
                        </div>
                        <div class="language-select-overlay">
                            <div class="language-select-box">
                                <div class="language-box">
                                    <a href="/en/" class="internal-link" title="English"><span class="sprite flag-en"></span>English</a>
                                </div>
                                <div class="language-box">
                                    <a href="/de/" class="internal-link" title="Deutsch"><span class="sprite flag-de"></span>Deutsch</a>
                                </div>
                                <div class="language-box">
                                    <a href="/es/" class="internal-link" title="Español"><span class="sprite flag-es"></span>Español</a>
                                </div>
                                <div class="language-box">
                                    <a href="/fr/" class="internal-link" title="Français"><span class="sprite flag-fr"></span>Français</a>
                                </div>
                                <div class="language-box">
                                    <a href="/it/" class="internal-link" title="Italiano"><span class="sprite flag-it"></span>Italiano</a>
                                </div>
                                <div class="language-box">
                                    <a...

CSS

.sprite{background-image:url('../img/commonimages.png?v12');background-color:transparent;background-repeat:no-repeat;display:inline-block}
.logo{width:148px;height:33px;background-position:-2px -127px}
:hover>.update-checker-button{width:32px;height:32px;background-position:-2px -93px}
.update-checker-button{width:32px;height:32px;background-position:-36px -91px}
.downloading-icon{width:21px;height:24px;background-position:-68px -48px}
.active .mac-button{width:22px;height:22px;background-position:-86px -78px}
:hover>.mac-button{width:22px;height:22px;background-position:-62px -2px}
.mac-button{width:22px;height:22px;background-position:-106px -26px}
.active .mobile-button{width:22px;height:22px;background-position:-38px -19px}
:hover>.mobile-button{width:22px;height:22px;background-position:-86px -2px}
.mobile-button{width:22px;height:22px;background-position:-2px -69px}
.active .windows-button{width:22px;height:22px;background-position:-26px -64px}
:hover>.windows-button{width:22px;height:22px;background-position:-110px -2px}
.windows-button{width:22px;height:22px;background-position:-128px -81px}
.facebook-button:hover{width:20px;height:20px;background-position:-125px -59px}
.facebook-button{width:20px;height:20px;background-position:-136px -105px}
.gplus-button:hover{width:20px;height:20px;background-position:-114px -105px}
.gplus-button{width:20px;height:20px;background-position:-84px -26px}
.rss-button:hover{width:20px;height:20px;background-position:-62px -26px}
.rss-button{width:20px;height:20px;background-position:-92px -102px}
.twitter-button:hover{width:20px;height:20px;background-position:-70px -102px}
.twitter-button{width:20px;height:20px;background-position:-2px -47px}
.news-icon{width:17px;height:16px;background-position:-24px -46px}
.bullet-arrow-icon{width:16px;height:16px;background-position:-50px -73px}
.download-icon:hover{width:16px;height:16px;background-position:-20px -15px}
.download-icon{width:16px;height:16px;background-position:-130px...

JavaScript

<!--[if lt IE 10]>
<script type="text/javascript" src="http://cache.filehippo.com/inc/jquery.placeholder.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input').placeholder();
    });
</script>
<![endif]-->
    <script type="text/javascript">
        $(document).ready(function () {
            $('input[type=search]').on('focus', function () {
                $(this).attr('placeholder', '');
            });

            $('input[type=search]').on('blur', function () {
                $(this).attr('placeholder', 'Search for something...');
            });

            // hiding the language selector
            $('body').on('click', function () {
                $('#language-switch').removeClass('active');
                $('.platform-search-filter').removeClass('active');
            });

            $('#language-switch').on('click', function (e) {
                $(this).toggleClass('active');
                e.stopPropagation();
            });

            $('.platform-search-current').on('click', function (e) {
                $(this).closest('.platform-search-filter').toggleClass('active');
                e.stopPropagation();
        });

            $('.platform-search-dropdown .platform-entry, .platform-search-dropdown .platform-entry input[type=checkbox]').on('click', function (e) {
                $('.platform-search-dropdown .platform-entry.active').removeClass('active');
                $('.platform-search-dropdown input[type=checkbox]').prop('checked', false);

                var selectedEntry = $(this).closest('.platform-entry');
                selectedEntry.toggleClass('active').find('input[type=checkbox]').attr('checked', true);
                $('.platform-search-current .platform-text').html(selectedEntry.find('.platform-text').html());
            });

            $('#searchbar-top form').on('submit', function (e) {
                var selectedPlatform = $('.platform-search-dropdown...