Created
May 13, 2025 13:13
-
-
Save adarsh-gupta101/7d7c42eb51934e8ec21b535cbe33224b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Tachyons Example</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.11.1/tachyons.css" | |
| /> | |
| <!-- font family popins --> | |
| <link | |
| href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700" | |
| rel="stylesheet" | |
| /> | |
| <!-- Compiled and minified CSS --> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" | |
| /> | |
| <!-- Compiled and minified JavaScript --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> | |
| <style> | |
| * { | |
| font-family: "poppins"; | |
| } | |
| </style> | |
| </head> | |
| <body class=""> | |
| <div class="row"> | |
| <div class="col s12 m8 l9"> | |
| <div class="card large w-100 h-70"> | |
| <div class="card-image w-100"> | |
| <img | |
| src="https://www.lambdatest.com/blog/wp-content/uploads/2022/08/How-To-Style-And-Write-CSS-In-Re-1.png" | |
| class="w-20" | |
| /> | |
| </div> | |
| <div class="card-content"> | |
| <p class="w-90"> | |
| In this article, we will learn how to style and write CSS in | |
| React. We will also learn about the different ways to style | |
| components in React. | |
| </p> | |
| </div> | |
| <div class="card-action"> | |
| <!-- <a href="#">Read More </a> --> | |
| <p class="chip">LambdaTest Blogs</p> | |
| <span class="right">Posted on Feb 8, 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col s12 m4 l3"> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <span class="card-title">Categories</span> | |
| <ul> | |
| <li><a href="#">Web development</a></li> | |
| <li><a href="#">React</a></li> | |
| <li><a href="#">JavaScript 3</a></li> | |
| <li><a href="#">UI/UX </a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-content"> | |
| <span class="card-title">Tags</span> | |
| <div class="chip">React</div> | |
| <div class="chip">CSS</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment