JSFiddle - React, Tailwind, and code Playground

by godwin gabriel

HTML

<h4>Random Qoutes</h4>
<div class="container">
	<div class="wrapper">
		<div class="quotes fade"id="quotes"><p>“Don't cry because it's over, smile because it happened.”<br> ― <i>Dr. Seuss</i></p></div>
		<div class="quotes fade"><p>“Be yourself; everyone else is already taken.”<br> ― <i>Oscar Wilde</i></p></div>
		<div class="quotes fade"><p>“Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”<br> ― <i>Albert Einstein</i></p></div>
		<div class="quotes fade"><p>“Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.”<br> ― <i>Bernard M. Baruch</i></p></div>
		<div class="quotes fade"><p>“A room without books is like a body without a soul.”<br> ― <i>Marcus Tullius Cicero</i></p></div>
		<div class="quotes fade"><p>“You know you're in love when you can't fall asleep because reality is finally better than your dreams.”<br> ― <i>Dr Seuss</i></p></div>
		<div class="quotes fade"><p>“You only live once, but if you do it right, once is enough.”<br> ― <i>Mae West</i></p></div>
		<div class="quotes fade"><p>“Be the change that you wish to see in the world.”<br> ― <i>Mahatma Gandhi</i></p></div>
		<div class="quotes fade"><p>“In three words I can sum up everything I've learned about life: it goes on.”<br> ― <i>Robert Frost</i></p></div>
		<div class="quotes fade"><p>“No one can make you feel inferior without your consent.”<br> ― <i>Eleanor Roosevelt, This is My Story</i></p></div>
		<div class="quotes fade"><p>“If you tell the truth, you don't have to remember anything.”<br> ― <i>Mark Twain</i></p></div>
		<div class="quotes fade"><p>“Always forgive your enemies; nothing annoys them so much.”<br> ― <i>Oscar Wilde</i></p></div>
		<div class="quotes fade"><p>“To live is the rarest thing in the world. Most people exist, that is all.”<br> ― <i>Oscar Wilde</i></p></div>
		<div class="quotes fade"><p>“I am so clever that sometimes I don't understand a single word of what I am...

CSS

body{background-color: #333;color:white;}
	
	
	
	.container{
	max-width:450px;
	margin:auto;
	}
	
	
	.wrapper{
	max-width:450px;
	height:200px;
	background-color:green;
	border-radius:4px;
	font-size:18px;
	text-align:center;
	font-family:cursive;
	position:relative;
	top:150px;
	}
	
	
	.quotes {
	max-width:400px;
	max-height:195px;
	margin:auto;
	font-size:18px;
	font-family:cursive;
	
	
	}
	
	
	.fade {
	  -webkit-animation-name: fade 1.5s;
	  -webkit-animation-duration: 1.5s;
	  animation-name: fade;
	  animation-duration: 1.5s;
	}

	@-webkit-keyframes fade {
	  from {opacity: .0} 
	  to {opacity: 1}
	}

	@keyframes fade {
	  from {opacity: .0} 
	  to {opacity: 1}
	}
	
	input{
	background-color:#333;
	color:white;
	position:absolute;
	bottom:0px;
	left:345px;
	padding:10px;
	border-radius:4px;
	border:1px solid black;
	font-family:cursive;
	
	}
	
	input:hover {
	cursor:pointer;
	background-color:brown;
	font-weight:bold;
	}

JavaScript

function randomQuote(){
	var quotes = document.getElementsByClassName("quotes");
	for(i=0; i<quotes.length; i++){
	quotes[i].style.display = "none";
	}
	quotes[Math.floor((Math.random() * 14) +0)].style.display = "block";
	
	
	}
	randomQuote();