JSFiddle - React, Tailwind, and code Playground

by dipaks2011

HTML

<article>
<h1>Gravity [2013] Movie Reviews</h1>
    Gravity opened the 70th Venice International Film Festival in August 2013 and had its North American premiere three days later at the Telluride Film Festival.[7] It was released to cinemas in the United States and Canada on October 4, 2013. The film was met with universal acclaim from critics and audiences; both groups praised Emmanuel Lubezki's cinematography, Steven Price's musical score, Cuarón's direction, Bullock's performance and Framestore's visual effects. It has grossed more than US$714 million worldwide, making it the eighth highest-grossing film of 2013.
</article>

CSS

article{
    -webkit-column-width: 8em;
    -moz-column-width: 8em;
    column-width: 8em;
    
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;
    
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;
    
    -webkit-column-rule: 1px solid #ccc;
    -moz-column-rule: 1px solid #ccc;
    column-rule: 1px solid #ccc;
    
    -webkit-column-rule-width: 2px;
    -moz-column-rule-width: 2px;
    column-rule-width: 2px;
    
    -webkit-column-rule-style: dotted;
    -moz-column-rule-style: dotted;
    column-rule-style: dotted;
    
    -webkit-column-rule-color: red;
    -moz-column-rule-color: red;
    column-rule-color: red;
}
article h1{
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span:all;
}