styled-components

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const StyledSideBySideBlock = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;

  @media (max-width: 48rem) {
    flex-direction: column;
  }

  .image-container {
    flex: 1;
    order: ${(props) => (props.reverse ? 2 : 1)};
  }

  .content-container {
    flex: 1;
    order: ${(props) => (props.reverse ? 1 : 2)};
  }

  img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }

  .text-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  h3 {
    font-size: 1.5rem;
    margin: 0;
  }

  p {
    margin: 0;
  }

  .cta-button {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
  }
`;

const SideBySideBlock = ({
  imageSrc,
  altText,
  browText,
  title,
  description,
  ctaLink,
  ctaText,
  reverse,
}) => {
  return (
    <StyledSideBySideBlock reverse={reverse}>
      <div className="image-container">
        <img src={imageSrc} alt={altText} />
      </div>
      <div className="content-container">
        <div className="text-container">
          {browText && <p className="brow-text">{browText}</p>}
          {title && <h3>{title}</h3>}
          {description && <p>{description}</p>}
          {ctaLink && ctaText && (
            <a href={ctaLink} className="cta-button">
              {ctaText}
            </a>
          )}
        </div>
      </div>
    </StyledSideBySideBlock>
  );
};

SideBySideBlock.propTypes = {
  imageSrc: PropTypes.string.isRequired,
  altText: PropTypes.string.isRequired,
  browText: PropTypes.string,
  title: PropTypes.string,
  description: PropTypes.string,
  ctaLink: PropTypes.string,
  ctaText: PropTypes.string,
  reverse: PropTypes.bool,
};

export default SideBySideBlock;

TailwindCSS

import React from 'react';
import PropTypes from 'prop-types';

const SideBySideBlock = ({
  imageSrc,
  altText,
  browText,
  title,
  description,
  ctaLink,
  ctaText,
  reverse,
}) => {
  return (
    <div className="flex justify-between items-center flex-wrap gap-8 md:flex-col">
      <div className={`flex-1 ${reverse ? 'order-2' : 'order-1'}`}>
        <img src={imageSrc} alt={altText} className="w-full h-auto rounded-md" />
      </div>
      <div className={`flex-1 ${reverse ? 'order-1' : 'order-2'}`}>
        <div className="flex flex-col gap-4">
          {browText && <p className="brow-text">{browText}</p>}
          {title && <h3 className="text-lg">{title}</h3>}
          {description && <p>{description}</p>}
          {ctaLink && ctaText && (
            <a
              href={ctaLink}
              className="bg-blue-500 text-white px-4 py-2 rounded-md inline-block mt-4"
            >
              {ctaText}
            </a>
          )}
        </div>
      </div>
    </div>
  );
};

SideBySideBlock.propTypes = {
  imageSrc: PropTypes.string.isRequired,
  altText: PropTypes.string.isRequired,
  browText: PropTypes.string,
  title: PropTypes.string,
  description: PropTypes.string,
  ctaLink: PropTypes.string,
  ctaText: PropTypes.string,
  reverse: PropTypes.bool,
};

export default SideBySideBlock;