JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<div id='w1'>width = 1px</div>
<div id='w2'>width = 2px</div>
<div id='w3'>width = 3px</div>
<div id='w4'>width = 4px</div>
<div id='w5'>width = 5px</div>
<div id='w6'>width = 6px</div>
<div id='w7'>width = 7px</div>
<div id='w8'>width = 8px</div>
<div id='w9'>width = 9px</div>
<div id='w10'>width = 10px</div>
<div id='w11'>width = 11px</div>
<div id='w12'>width = 12px</div>
<div id='w13'>width = 13px</div>
<div id='w14'>width = 14px</div>
<div id='w15'>width = 15px</div>
<div id='w16'>width = 16px</div>
<div id='w17'>width = 17px</div>
<div id='w18'>width = 18px</div>
<div id='w19'>width = 19px</div>
<div id='w20'>width = 20px</div>
<div id='w21'>width = 21px</div>
<div id='w22'>width = 22px</div>
<div id='w23'>width = 23px</div>
<div id='w24'>width = 24px</div>
<div id='w25'>width = 25px</div>
<div id='w26'>width = 26px</div>
<div id='w27'>width = 27px</div>
<div id='w28'>width = 28px</div>
<div id='w29'>width = 29px</div>
<div id='w30'>width = 30px</div>
<div id='w31'>width = 31px</div>
<div id='w32'>width = 32px</div>
<div id='w33'>width = 33px</div>
<div id='w34'>width = 34px</div>
<div id='w35'>width = 35px</div>
<div id='w36'>width = 36px</div>
<div id='w37'>width = 37px</div>
<div id='w38'>width = 38px</div>
<div id='w39'>width = 39px</div>
<div id='w40'>width = 40px</div>
<div id='w41'>width = 41px</div>
<div id='w42'>width = 42px</div>
<div id='w43'>width = 43px</div>
<div id='w44'>width = 44px</div>
<div id='w45'>width = 45px</div>
<div id='w46'>width = 46px</div>
<div id='w47'>width = 47px</div>
<div id='w48'>width = 48px</div>
<div id='w49'>width = 49px</div>
<div id='w50'>width = 50px</div>
<div id='w51'>width = 51px</div>
<div id='w52'>width = 52px</div>
<div id='w53'>width = 53px</div>
<div id='w54'>width = 54px</div>
<div id='w55'>width = 55px</div>
<div id='w56'>width = 56px</div>
<div id='w57'>width = 57px</div>
<div id='w58'>width = 58px</div>
<div id='w59'>width = 59px</div>
<div id='w60'>width = 60px</div>
<div id='w61'>width =...

CSS

</style>
<meta name='viewport' content='width=device-width' />
<style type='text/css'>

div {
	display:none;
}

@media all and (width:1px) {
	#w1{
		display: block;
	}
}

@media all and (width:2px) {
	#w2{
		display: block;
	}
}

@media all and (width:3px) {
	#w3{
		display: block;
	}
}

@media all and (width:4px) {
	#w4{
		display: block;
	}
}

@media all and (width:5px) {
	#w5{
		display: block;
	}
}

@media all and (width:6px) {
	#w6{
		display: block;
	}
}

@media all and (width:7px) {
	#w7{
		display: block;
	}
}

@media all and (width:8px) {
	#w8{
		display: block;
	}
}

@media all and (width:9px) {
	#w9{
		display: block;
	}
}

@media all and (width:10px) {
	#w10{
		display: block;
	}
}

@media all and (width:11px) {
	#w11{
		display: block;
	}
}

@media all and (width:12px) {
	#w12{
		display: block;
	}
}

@media all and (width:13px) {
	#w13{
		display: block;
	}
}

@media all and (width:14px) {
	#w14{
		display: block;
	}
}

@media all and (width:15px) {
	#w15{
		display: block;
	}
}

@media all and (width:16px) {
	#w16{
		display: block;
	}
}

@media all and (width:17px) {
	#w17{
		display: block;
	}
}

@media all and (width:18px) {
	#w18{
		display: block;
	}
}

@media all and (width:19px) {
	#w19{
		display: block;
	}
}

@media all and (width:20px) {
	#w20{
		display: block;
	}
}

@media all and (width:21px) {
	#w21{
		display: block;
	}
}

@media all and (width:22px) {
	#w22{
		display: block;
	}
}

@media all and (width:23px) {
	#w23{
		display: block;
	}
}

@media all and (width:24px) {
	#w24{
		display: block;
	}
}

@media all and (width:25px) {
	#w25{
		display: block;
	}
}

@media all and (width:26px) {
	#w26{
		display: block;
	}
}

@media all and (width:27px) {
	#w27{
		display: block;
	}
}

@media all and (width:28px) {
	#w28{
		display: block;
	}
}

@media all and (width:29px) {
	#w29{
		display: block;
	}
}

@media all and (width:30px) {
	#w30{
		display: block;
	}
}

@media all and (width:31px) {
	#w31{
		display: block;
	}
}

@media all...

JavaScript

// css @media based exact browser size read-out

/*
http://fiddle.jshell.net/niaconis/wXXca/version-#/show/
*/