Box Shadow Tailwind Css Code Example


Example 1: tailwind box shadow

<div class="shadow-sm ..."></div> <div class="shadow ..."></div> <div class="shadow-md ..."></div> <div class="shadow-lg ..."></div> <div class="shadow-xl ..."></div> <div class="shadow-2xl ..."></div>

Example 2: tailwind bottom shadow

<!DOCTYPE html> <html> 	<head> 		<title>Box Shadow</title> 		 		<style type="text/css"> 			.box { 				height: 150px; 				width: 300px; 				margin: 20px; 				border: 1px solid #ccc; 			} 			 			.top { 				box-shadow: 0 -5px 5px -5px #333; 			} 			 			.right { 				box-shadow: -5px 0 5px -5px #333; 			} 			 			.bottom { 				box-shadow: 0 5px 5px -5px #333; 			} 			 			.left { 				box-shadow: 5px 0 5px -5px #333; 			} 			 			.all { 				box-shadow: 0 0 5px #333; 			} 		</style> 	</head> 	<body> 		<div class="box top"></div> 		<div class="box right"></div> 		<div class="box bottom"></div> 		<div class="box left"></div> 		<div class="box all"></div> 	</body> </html>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable