Krishna Verma

Add Font

Program Info

Program Code

Add Font

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body>
   <h1 class="text-5xl font-playwrite m-10 p-5">This is an Demo Heading</h1>

</body>

</html>

Create Breakpoints

Program Info

Program Code

Download Program

Create Breakpoints

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="h-screen">
    <div class="bg-blue-500 size-full 2xl:bg-orange-300 xl:bg-yellow-500 lg:bg-green-500 md:bg-gray-500 sm:bg-red-500">
        <h1 class="text-xl sm:text-2xl md:text-4xl lg:text-6xl xl:text-8xl 2xl:text-9xl">This is an demo Heading</h1>

    </div>
</body>

</html>

Create Columns

Program Info

Program Code

Download Program

Create Columns

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="h-screen">
    <div class="columns-4">
         <div class="bg-red-500">Div 1</div>
         <div class="bg-green-500">Div 2</div>
         <div class="bg-blue-500">Div 3</div>
         <div class="bg-yellow-500">Div 4</div>
         <div class="bg-gray-500">Div 5</div>
         <div class="bg-black text-white">Div 6</div>
         <div class="bg-pink-500">Div 7</div>
         <div class="bg-orange-500">Div 8</div>
         <div class="bg-green-500">Div 9</div>
         <div class="bg-black text-white">Div 10</div>
         <div class="bg-pink-500">Div 11</div>
         <div class="bg-orange-500">Div 12</div>
         <div class="bg-green-500">Div 13</div>
         
    </div>
</body>

</html>

Create Custom Button

Program Info

Program Code

Download Program

Create Custom Button

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>

</head>

<body>
    <div class="m-10">
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-secondary">Secondary</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-danger">Danger</button>
        <button class="btn btn-warning">Warning</button>
        <button class="btn btn-info">Info</button>
        <button class="btn">Basic</button>
        <button class="btn btn-dark">Dark</button>

    </div>
</body>
</html>

Create Dropdown

Program Info

Program Code

Download Program

Create Dropdown

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body>
   <div class="group m-20">
    <div class="text-blue-500 cursor-pointer hover:text-blue-800">
        Hover on City List
       </div>
    
       <div class="hidden group-hover:block">
        <ul>
            <li><a href="#"> Delhi</a></li>
            <li><a href="#"> Noida</a></li>
            <li><a href="#"> Gurgaon</a></li>
            <li><a href="#"> UP</a></li>
    
        </ul>
    
       </div>
   </div>
</body>

</html>

Showing page 1 of 2 (Total 6 records)