JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.min.css">
<div class="container bs-docs-container">
		<div class="row">
			<div class="col-md-12" role="main">
				<div class="bs-docs-section">
					<h3>Visible on... </h3>
					<p>Green checkmarks indicate the element <strong>is visible</strong > in your current viewport. </p>
					<div class="row responsive-utilities-test visible-on">
						<div class="col-xs-6 col-sm-3">
							<span class="hidden-xs">Extra small</span> <span class="visible-xs-block"> ✔Visible on x - small </span>
						</div>
						<div class="col-xs-6 col-sm-3">
							<span class="hidden-sm"> Small </span> <span class="visible-sm-block">✔ Visible on small</span>
						</div>
						<div class="clearfix visible-xs-block">
						</div>
						<div class="col-xs-6 col-sm-3">
							<span class="hidden-md"> Medium </span> <span class="visible-md-block">✔ Visible on medium</span>
						</div>
						<div class="col-xs-6 col-sm-3">
							<span class="hidden-lg">Large</span> <span class="visible-lg-block"> ✔Visible on large </span>
						</div>
					</div>
					<div class="row responsive-utilities-test visible-on">
						<div class="col-xs-6 col-sm-6">
							<span class="hidden-xs hidden-sm">Extra small and small</span> <span class="visible-xs-block visible-sm-block"> ✔Visible on x - small and small </span>
						</div>
						<div class="col-xs-6 col-sm-6">
							<span class="hidden-md hidden-lg"> Medium and large </span> <span class="visible-md-block visible-lg-block">✔ Visible on medium and large</span>
						</div>
						<div class="clearfix visible-xs-block">
						</div>
						<div class="col-xs-6 col-sm-6">
							<span class="hidden-xs hidden-md"> Extra small and medium </span> <span class="visible-xs-block visible-md-block">✔ Visible on x-small and medium</span>
						</div>
						<div class="col-xs-6 col-sm-6">
							<span...

JavaScript

Responsive utilities (Visible on and Hidden on)