App.jsx

import './App.css'

function App() {

  const disableInput = true

  return (
    <>
      <label
        htmlFor="username"        // for
      >
        Username:
      </label>
      <input
        type="text"
        id="username"

        className="input-field"   // class
        autoComplete="off"        // autocomplete

        maxLength={20}            // maxlength
        spellCheck={true}         // spellcheck
        readOnly={false}          // readonly
        tabIndex={0}              // tabindex

        disabled={disableInput}
        placeholder={
          disableInput ? "(DISABLED)" : "Enter your name."
        }
      />
    </>
  )
}

export default App

App.jsx

import './App.css'

function App() {

 return (
    <>
      <span style={
        {
          fontWeight: "bold",
          fontStyle: "italic"
        }
      }>
        Bold & Italic
      </span>
    </>
  )
}

export default App

App.jsx

import './App.css'

function App() {
  
  const divStyle = {
    backgroundColor: 'lightblue',
    margin: '12px',
    padding: '20px',
    borderRadius: '8px'
  }

 return (
    <>
      <div style={divStyle}>
        DIV 1
      </div>

      <div
        style={{
          ...divStyle,
          color: 'darkblue',
          fontWeight: 'bold',
          
        }}
      >
        DIV 2
      </div>
    </>
  )
}

export default App

App.jsx

import './App.css'

function App() {

  const styleA = {
    color: 'darkred',
    fontWeight: 'bold',
  }
  
  const styleB = {
    color: 'navy',
    textDecoration: 'underline',
  }

  const isPrimary = true

 return (
    <>
      <div style={isPrimary ? styleA : styleB}>
        This text has dynamic styling.
      </div>

      <span
        style={{
          fontSize: isPrimary ? '1.5em' : '1em',
          opacity : isPrimary ? 1 : 0.5
        }}
      >
        So does this text.
      </span>
    </>
  )
}

export default App