JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="page">
<div class="page2">
Flex = 6
</div>
</div>

Minimum Social Media Tag Template: Article
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />



<picture>
  <source srcset="../images/man-with-hammer-720.jpg" media="(min-width: 740px)">
  <source srcset="../images/man-with-hammer-440.jpg" media="(min-width: 460px)">
  <source srcset="../images/man-with-hammer-300.jpg">
  <img src="../images/man-with-hammer-720.jpg" alt="Garden">
</picture>



300 x 150
440 x 220
720 x 360

CSS

.page {max-width:940px;margin:auto;background-color:#eee;}
.page2 {max-width:720px;height:360px;margin:auto;background-color:#dedede;}

@media screen and (max-width:740px){     

.page {max-width:640px;margin:auto;background-color:#eee;}
.page2 {max-width:440px;height:210px;margin:auto;background-color:#dedede;}

}

@media screen and (max-width:460px){     

.page {max-width:420px;margin:auto;background-color:#eee;}
.page2 {max-width:300px;height:150px;margin:auto;background-color:#dedede;}

}