Posts

react js hooks useRef to show input variable value without using name property, and use for set focus

Image
  code import { useRef } from "react" ; function App () {   const num1 = useRef();   const focusInput = () => {     num1.current.focus(); alert(num1.current.value)   };   return (     <>       <input type= "text" ref={num1} />       <button onClick={focusInput}> Focus Input </button>     </>   ); } export default App
Read more

card with 2 pages tailwind and react js

  Here is an example of creating a card in React using Tailwind CSS that includes an image and a bottom description: Copy code impo import React from 'react'; const Card = ({imgSrc, title, description}) => {   return (     <div className="max-w-sm rounded overflow-hidden shadow-lg">       <img src={imgSrc} alt={title} className="w-full" />       <div className="px-6 py-4">         <div className="font-bold text-xl mb-2">{title}</div>         <p className="text-gray-700 text-base">           {description}         </p>       </div>     </div>   ); } export default Card; In this example, the Card component takes in three props: imgSrc , title , and description . These props are used to render an image, a title, and a description inside the card. The card itself is a div ...
Read more

tailwind css 3 cards responsive design

Image
 import React from 'react'; const Cards = () => {   return (     <div className="bg-white p-4">       <div className="flex flex-col md:flex-row">         <div className="md:w-1/3 p-4">           <div className="bg-gray-300 p-4">Card 1</div>         </div>         <div className="md:w-1/3 p-4">           <div className="bg-gray-300 p-4">Card 2</div>         </div>         <div className="md:w-1/3 p-4">           <div className="bg-gray-300 p-4">Card 3</div>         </div>       </div>     </div>   ); } export default Cards; explaination Here the parent div has the class "bg-white p-4" which applies a white background color and padding ...
Read more