All solutions

• 
  Submitted 3 months ago

  Interactive Rating Component - React & Tailwind

  • HTML
  • CSS
  • JS

  1

  30

  ---

  Am I using React state correctly in this example?

  function App() {
    const [rating, setRating] = useState(null);
    const [submitted, setSubmitted] = useState(false);
  
    const handleSubmit = (e) => {
      e.preventDefault();
      if (rating !== null) {
        setSubmitted(true);
      }
    };
  

  function Rating({ setRating, handleSubmit, rating }) {
    const handleRating = (value) => {
      setRating(value);
    };
  

• 
  Submitted 4 months ago

  Product Preview Card - React & Tailwind CSS

  • HTML
  • CSS

  2

  80

  ---

  Ways or tips to simplify the design process for both small and large screens.

• 
  Submitted 4 months ago

  Results Summary (React & Tailwind CSS)

  • HTML
  • CSS

  0

  80

  ---

  Is there a better way to dynamically style color using Tailwind CSS? See my challenge above.

• 
  Submitted 4 months ago

  FAQ Accordion (React and Tailwind CSS)

  • HTML
  • CSS
  • JS

  0

  30

  ---

  I'm curious if the keyboard focus solution that I implemented is reasonable. Is there a simpler or cleaner way?

  function AccordionItem({ title, text }) {
    const [isOpen, setIsOpen] = useState(false);
    const headerRef = useRef(null);
  
    function handleToggle() {
      setIsOpen(prevIsOpen => !prevIsOpen);
    }
  
    const handleKeyDown = event => {
      if (event.key === 'Enter' || event.key === ' ') {
        handleToggle();
      } else if (event.key === 'ArrowDown') {
        const nextSibling = headerRef.current.parentElement.nextElementSibling;
        if (nextSibling) {
          nextSibling.querySelector('.accordion-header').focus();
        }
      } else if (event.key === 'ArrowUp') {
        const previousSibling =
          headerRef.current.parentElement.previousElementSibling;
        if (previousSibling) {
          previousSibling.querySelector('.accordion-header').focus();
        }
      }
    };
    return (
      
        
          {title}
          
        
        
          {text}
        
      
    );
  }
  

• 
  Submitted 4 months ago

  Blog Preview Card (React and Tailwind)

  • HTML
  • CSS

  2

  70

  ---

  I could use more help translating the Figma design to css, specifically how to use 'rem' and the association with Tailwind classes.

• 
  Submitted 4 months ago

  Social Links Profile (React and Tailwind CSS)

  • HTML
  • CSS

  2

  30

  ---

  Can I improve this by using React useState hook for the hover function or is CSS hover properties sufficient?

  Eg-

  a:hover {
    @apply bg-green text-black;
  }
  

• 
  Submitted 4 months ago

  Recipe Page (React and Tailwind CSS)

  • HTML
  • CSS

  0

  10

  ---

  I'd like help using Tailwind CSS to properly align the decimal ordered list items in the 'Instructions' section.

  function Instructions() {
    return (
      
        Instructions
        
          
            Beat the eggs: In a bowl,
            beat the eggs with a pinch of salt and pepper until they are well
            mixed. You can add a tablespoon of water or milk for a fluffier
            texture.
          
          
            Heat the pan: Place a
            non-stick frying pan over medium heat and add butter or oil.
          
          
            Cook the omelette: Once
            the butter is melted and bubbling, pour in the eggs. Tilt the pan to
            ensure the eggs evenly coat the surface.
          
          
            Add fillings (optional):{' '}
            When the eggs begin to set at the edges but are still slightly runny
            in the middle, sprinkle your chosen fillings over one half of the
            omelette.
          
          
            Fold and serve: As the
            omelette continues to cook, carefully lift one edge and fold it over
            the fillings. Let it cook for another minute, then slide it onto a
            plate.
          
          
            Enjoy: Serve hot, with
            additional salt and pepper if needed.
          
        
        
      
    );
  }
  

  and custom css:

  .custom-ordered-list li::marker {
    @apply text-nutmeg font-bold;
  }
  
  .custom-ordered-list {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
  }
  
  .custom-ordered-list li {
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: 0.9rem;
  }
  
  .custom-ordered-list li::before {
    content: counter(item) '.';
    counter-increment: item;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #8b4513;
  }
  
  .custom-ordered-list .bold-span {
    display: inline-block;
    width: rem;
  }
  

• 
  Submitted 5 months ago

  QR Code Component - React and Tailwind

  • HTML
  • CSS

  0

  30

  ---

  I could use help with the paragraph text. It doesn't match the original image. I was instructed per the project style-guide.md that paragrah text is font-size 15 px.