JSFiddle - React, Tailwind, and code Playground

by chan_omega

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="col mb-4">
  <a class="textoc d-block" href="user/terapeuticos">
    <div class="card carta">

      <img src="https://via.placeholder.com/300x100.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title subtitulo2 text-center rounded">Masajes terapéuticos</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>

  </a>

</div>

CSS

.textoc {

  opacity: 1;
  text-decoration: none;
  color: black;
  background-color: rgba(255, 255, 255, 1);

}

.textoc:hover .card {
  opacity: 0.5;
}

.textoc:visited {
  color: black;

}

.carta {
  border-style: solid;
  border-color: #F3329F;
  border-width: 2px;

}

.subtitulo2 {

  color: #F3329F;
  border-style: solid;
  border-color: #F3329F;
  border-width: 1px;
}