BrowserCode
LearnExercisesQuizzesPlaygroundReferencesProjects
BrowserCode
Ctrl K
HTMLCSSJavaScriptTypeScriptPythonTailwind CSSReactBootstrapPHPSQLMongoDBNode.jsSEOTyping Speed
HTMLCSSJavaScriptTypeScriptPythonTailwind CSSReactBootstrapPHPSQLMongoDBNode.jsSEOTyping Speed
Back to Tailwind Index

Layout & Styling

  • `absolute`
  • `bg-blue-500`
  • `block`
  • `border`
  • `border-gray-300`
  • `duration-300`
  • `ease-in-out`
  • `flex`
  • `font-bold`
  • `gap-4`
  • `grid`
  • `h-full`
  • `hidden`
  • `inline-block`
  • `items-center`
  • `justify-between`
  • `justify-center`
  • `left-0`
  • `m-4`
  • `mx-auto`
  • `p-4`
  • `px-4`
  • `py-2`
  • `relative`
  • `rounded-full`
  • `rounded-lg`
  • `shadow-lg`
  • `shadow-md`
  • `text-lg`
  • `text-sm`
  • `text-white`
  • `top-0`
  • `transition`
  • `w-full`
  • `z-10`

Responsive & States

  • `focus:ring`
  • `hover:bg-blue-600`
  • `lg:hidden`
  • `md:grid`
  • `sm:flex`
  1. References
  2. Tailwind CSS
  3. Layout & Styling
Layout & Styling

`border-gray-300`

Tailwind CSS utility class: border-gray-300

Tailwind: border-gray-300

Applies specific styles instantly.

Example

<div class="border-gray-300">
  Content here
</div>
← Previous`border`Next →`hover:bg-blue-600`
BrowserCode

An interactive educational platform designed to help you learn modern web development directly in your browser. No setup required.

Learn

  • Courses
  • Playgrounds
  • Exercises
  • Quizzes
  • Projects
  • References
  • Typing Speed

Company

  • About Us
  • Contact

Legal

  • Privacy Policy
  • Terms of Service
  • Cookie Policy
  • Acceptable Use
  • Disclaimer

© 2026 BrowserCode. All rights reserved.

Made for education.