CODE EXAMPLE FOR TYPESCRIPT

media query with styled-components

// You first need to install 'styled-components' from your package manager

import { useState } from 'react'
import styled from 'styled-components'

const DivContainer = styled.div`
    border-radius: .5rem;
    padding-block: .5rem;
    box-shadow: 1px 1px 5px rgba(25, 25, 25, .65);
    
    // Media query
      @media (min-width: 768px) {
        width: auto;
      }
`

const InputControl = styled.input`
	width: 80%;
    padding: .5rem;
    border-radius: .5rem;
    margin-inline: auto;
    background-color: ${({inputLength}) => inputLength < 1 
                                          ? 'maroon': 'transparent' };
    border: ${({inputLength}) => inputLength < 1 
                                		  ? '1px solid red': 'none' };
    color: ${({inputLength}) => inputLength < 1 ? 'white': 'black' };
    
    // Media query
      @media (min-width: 768px) {
        width: 100%;
      }
`

const userName = () => setUserName(userName)

const Card = () => (
  const [ userName, setUserName] = ('');

  // Instead of regular <div></div> Tag
  // You wrap your elements around your 'custom styled component'
  <DivContainer>
  	<InputControl inputLength={userName.length} 
		value={userName} 
		onChange{handleUserName} 
		placeholder="Enter your name" />
  </DivContainer>
)

// With love @kouqhar