JSFiddle - React, Tailwind, and code Playground

by slphd

HTML

<link rel="stylesheet" href="https://d3moonnr9fkxfg.cloudfront.net/royal-canin.styles.min.css?v=8-4-0">
<script src="https://d3moonnr9fkxfg.cloudfront.net/royal-canin.min.bundle.js?v=8-4-0"></script>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="rc-layout-container rc-two-column">

    <div class="rc-column">
      <article class="rc-card rc-card--a">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
        <picture class="rc-card__image">
          <img class="lazyload" data-sizes="auto" data-srcset="https://placehold.it/320x180 320w, https://placehold.it/360x200 360w, https://placehold.it/640x360 640w, https://placehold.it/720x410 720w, https://placehold.it/960x540 960w, https://placehold.it/1280x720 1280w, https://placehold.it/1440x810 1440w" alt="Kitten and puppy playing with ball">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
          <p>Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.</p>
        </div>
      </article>
    </div>

    <div class="rc-column">
      <article class="rc-card rc-card--a">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
        <picture class="rc-card__image">
          <img class="lazyload" data-sizes="auto" data-srcset="https://placehold.it/320x180 320w, https://placehold.it/360x200 360w, https://placehold.it/640x360 640w, https://placehold.it/720x410 720w, https://placehold.it/960x540 960w, https//placehold.it/1280x720 1280w, https//placehold.it/1440x810 1440w" alt="Kitten and puppy playing with...

CSS

.lazyload,
.lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

.rc-card--a .rc-card__image *, .card--a .rc-card__image *, .rc-card--a .card__image *, .card--a .card__image *{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}