diff --git a/README.md b/README.md
index 345e2c8..d7aa5da 100644
--- a/README.md
+++ b/README.md
@@ -463,6 +463,55 @@ interface SelectProps {
 }
 ```
 
+#### Example of a custom style
+
+```javascript
+import { useState } from "react";
+import Select from "react-tailwindcss-select";
+
+const options = [
+    { value: "fox", label: "🦊 Fox" },
+    { value: "Butterfly", label: "🦋 Butterfly" },
+    { value: "Honeybee", label: "🐝 Honeybee" }
+];
+
+const App = () => {
+    const[animal, setAnimal] =useState(null);
+
+    const handleChange = value => {
+        console.log("value:", value);
+        setAnimal(value);
+    };
+
+    return(
+        <Select
+            value={animal}
+            onChange={handleChange}
+            options={options}
+            classNames={{
+                menuButton: ({ isDisabled }) => (
+                    `flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none ${
+                        isDisabled
+                            ? "bg-gray-200"
+                            : "bg-white hover:border-gray-400 focus:border-blue-500 focus:ring focus:ring-blue-500/20"
+                    }`
+                ),
+                menu: "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
+                listItem: ({ isSelected }) => (
+                    `block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${
+                        isSelected
+                            ? `text-white bg-blue-500`
+                            : `text-gray-500 hover:bg-blue-100 hover:text-blue-500`
+                    }`
+                )
+            }}
+        />
+    );
+};
+
+export default App;
+```
+
 ## Contributing
 
 Got ideas on how to make this better? Open an issue!