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
Post a Comment