JSFiddle - React, Tailwind, and code Playground

by zumwalt

HTML

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et tortor lacus. Cras vel lacus eu urna malesuada aliquet. In sed nisl eget lorem feugiat rhoncus nec sodales purus. Ut non quam non quam ultricies blandit non in risus. Mauris eu dui at odio tincidunt vestibulum. Suspendisse turpis orci, aliquam nec bibendum nec, lacinia vel justo. Donec congue massa dui, a aliquet quam. Nam elementum, enim nec semper egestas, lacus ipsum molestie mi, ac aliquet libero mauris ut massa. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ornare pellentesque felis, sed suscipit orci facilisis vitae. Sed eu ante eget nibh blandit auctor. Sed libero felis, sollicitudin eget vehicula in, sodales sit amet velit. Cras aliquet tellus at erat dignissim gravida et a nulla. Vivamus quis lectus in ipsum sodales mollis in eget purus. Mauris volutpat tortor nec tellus facilisis ac feugiat ipsum ornare.</p>

<p>Sed vehicula sollicitudin sapien eu facilisis. Suspendisse potenti. Sed scelerisque, mi id tristique semper, erat quam imperdiet tortor, sit amet tincidunt turpis eros eget nulla. Quisque malesuada mauris nec turpis interdum tincidunt. Pellentesque placerat, felis eget vestibulum pretium, nulla turpis scelerisque libero, non dapibus velit neque at lectus. Mauris fringilla magna et diam auctor eu accumsan turpis posuere. Nam quis orci nec neque sollicitudin semper bibendum in odio. Aenean suscipit ornare odio, sit amet tincidunt justo sodales ut. Cras hendrerit bibendum malesuada. Maecenas et sapien lacus. Praesent tincidunt consequat lobortis.</p>

<p>Proin enim orci, aliquet quis sagittis non, commodo vel turpis. Donec luctus, arcu ut congue consectetur, nibh tortor interdum justo, sit amet porta felis nisl vitae ipsum. Etiam sagittis interdum tincidunt. Fusce dapibus vehicula magna, nec lobortis justo porta quis. Curabitur varius magna non urna commodo...

CSS

.content {
   padding: 15px;               
}

.content p {
    font-family: 'helvetica neue', helvetica, sans-serif;        
    margin: 0 0 15px;                    
}

JavaScript

// Count those words.    
$(document).ready(function(){
   var wordCount = $('.content').text().split(/\s+/).length;
   var readingTime = Math.round(parseInt(wordCount, 10) / 250);
    
   $('.content').prepend('<h1> Reading time is approximately '+readingTime+' minutes.</h1>');
});