fredbegin11

<div class="container">
  <span>Label #1</span>
  <span>Label #2</span>
  <span>Label #3</span>
</div>

fredbegin11

.card {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction: column;
  max-width: 300px;

  &__title {
    font-size: 24px;
    padding: 10px;
  }

fredbegin11

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

const Card = ({ description, isWarning, title }) => (
  <article className={`card ${isWarning && '--warning'}`}>
    <h3 className="card__title">{title}</h3>

    <p className="card__description">{description}</p>
  </article>
);

fredbegin11

.header {  
   &__title {
      font-size: 2rem;  

      @include phone {    
         font-size: 1rem; 
      }
   }
}

fredbegin11

@mixin small-phone {
  @media (max-width: 375px) {
    @content;
  }
}

@mixin phone {
  @media (max-width: 767px) {
    @content;
  }

fredbegin11

.header {
  &__title {
    font-size: 24px; 
  }
  
  &__subtitle {
    font-size: 20px; 
    
    &.--warning {
      color: yellow;  

fredbegin11

$primary-color: #ffffff
  
body {
  background-color: $primary-color;
}

fredbegin11

import axios from 'axios';
import React, { useState, useEffect } from 'react';

const Rhyme = () => {
  const [word, setWord] = useState('');
  const [rhymes, setRhymes] = useState([]);

  const fetchRhyme = async () => {
    const response = await axios.get(`https://api.datamuse.com/words?rel_rhy=${word}`);
    setRhymes(response.data);

fredbegin11

import React, { useState } from 'react';

const MultiCounter = () => {
  const [age, setAge] = useState(26);
  const [months, setMonths] = useState(1);

  return (
    <>
      <p>Age: {age}</p>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>

fredbegin11

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>