<div class="card">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error quos necessitatibus excepturi harum a at officia, explicabo esse consectetur recusandae.</p>
<a href="#">Action</a>
</div>
* {
margin: 0 0 1rem 0;
}
body {
display: grid;
place-items: center;
margin: 0;
min-height: 100vh;
background-color: hsl(218, 84%, 5%);
font-family: sans-serif;
color: hsl(218, 84%, 90%);
line-height: 1.2rem;
}
.card {
padding: 2rem;
width: 180px;
height: auto;
background-color: hsl(218, 84%, 10%);
border: 3px solid;
border-image: linear-gradient(
135deg,
hsl(222, 99%, 20%),
hsl(222, 99%, 100%),
hsl(222, 99%, 20%)
) 1;
}
.card a {
display: inline-block;
margin: 0;
padding: 0.5rem 1rem;
border: solid 1px hsl(218, 84%, 90%);
color: hsl(218, 84%, 90%);
text-decoration: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.