Check out example codes for "CARD WITH IMAGE CSS". It will help you in understanding the concepts better.

Code Example 1

<div class="card"> <!--Start a div-->
  <img src="..." class="card-img-top" alt="..."> <!--add source and class-->
  <div class="card-body"> <!-- Keep class names relative to what you are doing-->
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card
      title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a> <!-- Add link
 with href and put text for button in-->
  </div>
</div> <!--Be sure to close both div-->

Code Example 2

<div class="card">
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="https://amzn.to/3jOaZKL">Test 1</a></li>
        <li class="tab"><a class="active" href="#test5">Test 2</a></li>
        <li class="tab"><a href="#test6">Test 3</a></li>
      </ul>
    </div>
    <div class="card-content grey lighten-4">
      <div id="test4">Test 1</div>
      <div id="test5">Test 2</div>
      <div id="test6">Test 3</div>
    </div>
  </div>

Learn ReactJs, React Native from akashmittal.com