cntl-with-cntl.tsx

import React from 'react';
import cntl from 'cntl';

const wrapperCN = cntl`
  max-w-sm
  rounded
  overflow-hidden
  shadow-lg
`;

const imageCN = cntl`
  w-full
`;

const sectionCN = cntl`
  px-6
  py-4
`;

const titleCN = cntl`
  font-bold
  text-xl
  mb-2
`;

const descriptionCN = cntl`
  text-gray-700
  text-base
`;

const tagCN = cntl`
  inline-block
  bg-gray-200
  rounded-full
  px-3
  py-1
  text-sm
  font-semibold
  text-gray-700
  mr-2
`;

const Card = () => (
  <div className={wrapperCN}>
    <img className={imageCN} src="/img/card-top.jpg" alt="Sunset in the mountains" />
    <div className={sectionCN}>
      <div className={titleCN}>The Coldest Sunset</div>
      <p className={descriptionCN}>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis
        eaque, exercitationem praesentium nihil.
      </p>
    </div>
    <div className={sectionCN}>
      <span className={tagCN}>#photography</span>
      <span className={tagCN}>#travel</span>
      <span className={tagCN}>#winter</span>
    </div>
  </div>
);