JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
	<div class="col s12 m3">
        <div class="card hoverable">
            <div class="image">
            <img src=# alt='image' />
            </div>
            <div class="card-content">
                <p class='card-name'>...</p>
                <p class='card-mail'>...</p>
                <p class='card-location'>...</p>
            </div>
        </div>
    </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>

CSS

.hoverable {
box-shadow: 0 2px 2px 0 blue, 0 3px 1px -2px blue, 0 1px 5px 0 blue;
}

.hoverable:hover {
  box-shadow: 2px 4px 5px 0 blue, 2px 5px 3px -3px blue, 2px 5px 10px 0 blue;
}