JSFiddle - React, Tailwind, and code Playground

by Benny Aarup

HTML

<div class="fb-comments fb-1" data-href="http://lucasraven.com/blog" data-width="900" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-2" data-href="http://lucasraven.com/blog" data-width="800" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-3" data-href="http://lucasraven.com/blog" data-width="700" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-4" data-href="http://lucasraven.com/blog" data-width="600" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-5" data-href="http://lucasraven.com/blog" data-width="500" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-6" data-href="http://lucasraven.com/blog" data-width="400" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-7" data-href="http://lucasraven.com/blog" data-width="300" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-8" data-href="http://lucasraven.com/blog" data-width="200" data-numposts="5" data-colorscheme="light"></div>

<!--Little man pushing - no need to include -->

<img class="joke" src="http://thumb9.shutterstock.com/thumb_small/1294/105548876/stock-photo-man-pushing-an-imaginary-object-isolated-over-a-white-background-105548876.jpg" alt="some_text">
    
<!--Little man pushing - end -->

CSS

@media all and (min-width: 400px), (max-width: 300px) {

.fb-8{
display: none !important;
}
}

@media all and (min-width: 500px), (max-width: 400px) {

.fb-7{
display: none !important;
}
}


@media all and (min-width: 600px), (max-width: 500px) {

.fb-6 {
display: none !important;
}
}


@media all and (min-width: 700px), (max-width: 600px) {

.fb-5 {
display: none !important;
}
}

@media all and (min-width: 800px), (max-width: 700px) {

.fb-4 {
display: none !important;
}
}


@media all and (min-width: 900px), (max-width: 800px){

.fb-3 {
display: none !important;
}
}

@media all and (min-width: 1000px), (max-width: 900px){

.fb-2 {
display: none !important;
}
}

@media all and (max-width: 1000px) {

.fb-1 {
display: none !important;
}
}


/*Little man pushing - no need to include */


.joke {
position:fixed;
right:0px;
top:0px;    
}
    
/*Little man pushing - end */

JavaScript

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/da_DK/all.js#xfbml=1&appId=220645301306019";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));