JSFiddle - React, Tailwind, and code Playground

by Shishir Morshed

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.tooltip {
		font-weight: bold; 
		color: red;
		display: inline-block;
		width: 20px;
		height: 20px;
		border: 1px solid red;
		text-align: center;
		line-height: 20px;
		position: relative;
	}


	.tooltip__content {
		position: absolute;
		z-index: -100;
		width: 300px;
		right: -300px;
		box-sizing: border-box;
		top: 50%;
		transform: translateY(-50%);
		visibility: hidden;
		opacity: 0;
		transition: all 300ms;
		padding-left: 15px;
	}

	.tooltip--left .tooltip__content{
		left: -300px;
		right: auto;
		padding-right: 15px;
		padding-left: 0px;
	}

	.tooltip__body {
		box-sizing: border-box;
		width: 100%;
		display: inline-block;
		border: 1px solid black;
		background: #fff;
		box-shadow: 1px 1px 15px rgba(00,00,00,.1);
		padding: 25px 30px;
	}

	.is-active .tooltip__content {
		visibility: visible;
		z-index: 100;
		opacity: 1;
	}

	.box {
		border: 1px solid red;
	}

	.box .box { width: 45%; float: left;}
	</style>
</head>
<body>
	<div style="width: 150vw; overflow: hidden;">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut deleniti rem in asperiores quidem, beatae quisquam autem ea ratione repellat voluptatum. Dolor autem, repellat perferendis! Itaque eos iusto vel est necessitatibus, eum animi quasi. Corporis cum quia sapiente fuga unde possimus, error commodi repudiandae eligendi? A, recusandae quaerat ducimus sapiente quidem voluptate saepe ab odit placeat. Sequi nihil libero, necessitatibus error dignissimos magni doloremque, ducimus quidem, quisquam itaque reprehenderit, reiciendis dolorum distinctio ipsam commodi et cumque ad nobis odit ea dolorem fuga suscipit quae! Molestias blanditiis fugiat, corrupti aut. Consequuntur, quidem. Maxime velit dicta quae obcaecati ratione minus porro et expedita neque consequatur excepturi corrupti ipsam aut molestiae ex qui, pariatur numquam iste quia illum odit. Porro quisquam ut odio temporibus...