JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="card">
  <div class="img">
    <img src="https://picsum.photos/500/300" alt="">
  </div>
  <div class="tit">
    <a href="" class="js-tit">Heading</a>
  </div>
  <p class="desc">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, numquam?
  </p>
  <div class="btn-group">
    <a href="#" class="js-action">Action</a>
  </div>
</div>

SCSS

body {
  color: #444;
  background: #999999;
}
a {
  color: #444;
  text-decoration: none;
}
.card {
  position: relative;
  width: 400px;
  padding: 20px;
  margin: 30px auto;
  background: #ffffff;
  .img {
    img {
      width: 100%;
    }
  }
  .tit {
    margin-top: 10px;
    a {
      font-size: 20px;
      font-weight: 700;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  .desc {
    margin-top: 10px;
  }
  .btn-group {
    margin-top: 10px;
    a {
      position: relative;
      z-index: 5;
      display: block;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      background: #e4e4e4;
    }
  }
}

JavaScript

const tit = document.querySelector('.js-tit')
const action = document.querySelector('.js-action')

tit.addEventListener('click', function(event) {
	event.preventDefault()
	alert('tit')
})

action.addEventListener('click', function(event) {
	event.preventDefault()
	alert('action')
})