JSFiddle - React, Tailwind, and code Playground

by Danielle Parkinson

HTML

<div>
    <div class="secondary-filters pull-right">
        <span class="switch-label left">Top Themes</span>
        <div class="material-switch">
            <input id="theme-toggle" name="theme-toggle" type="checkbox">
            <label for="theme-toggle" class="label-primary"></label>
        </div>
        <span class="switch-label right">Emerging Themes</span>
    </div>
</div>

<div>
    <div id="theme-bubble-carousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
                <div class="item active">
                    <div id="theme-bubbles-1" class="theme-bubble-container active">
                    </div>
                </div>
                <div class="item">
                    <div id="theme-bubbles-2" class="theme-bubble-container">
                    </div>
                </div>
        </div>
    </div>
</div>

CSS

#theme-bubbles-1 {
  height: 200px;
  width: 20px;
  background: '#00a3a1'
}

#theme-bubbles-1 {
  height: 200px;
  width: 20px;
  background: '#555555'
}