Here's some Free to use css for J.ai using lunaxlee's guide, please include credit in your bio somewhere PS. (the first style tag(style) the second one, at the end, remove only 1 otherwise code wont work

Coffee

The only thing here you need to edit would be the Follow button text which is marked :)

<style> /*General styles for a column layout */ .css-1uodvt1 { padding-top: 0; display: flex; /* Added to enable flexbox */ flex-direction: column; justify-content: center; /* Changed from justify-items to justify-content */ align-items: center; /* Added to center align items */ text-align: center; } /* Clip-path and shadow styles */ .css-18bnokj, .css-rlobw7 { clip-path: polygon(100% 50%, 65.451% 97.553%, 9.549% 79.389%, 9.549% 20.611%, 65.451% 2.447%); box-shadow: 0 0 50px 15px #c6ab80; } /* Grayscale filter with transition effects */ .css-1q7rmf0 { filter: sepia(100%); transition: filter 0.2s ease; /* Updated to use standard transition property */ } .css-1q7rmf0:hover { filter: none; } /* Follow button styles */ .Btn[data-following='true']:before { position: absolute; content: "Frolicing about" !important; color: #472a28; border: 4px solid #fsfsdc; border-radius: 6px; background-color: #c6ab80; font-family: "FONT"; /* Ensure "FONT" is defined elsewhere */ } .Btn[data-following='false']:before { position: absolute; content: "Frolic about" !important; color: #472a28; border: 4px dotted #fsfsdc; border-radius: 6px; background-color: #c6ab80; font-family: "FONT"; } .Btn span { visibility: hidden; /* Hides the default button text */ } /* Bot card preview text */ .css-96l1id { color: #a379sb; font-family: "FONT"; } /* Bot card background */ .css-1s5evre { background: linear-gradient(45deg, #C6ab80, #71503A, #472A28) !important; /* Added commas */ border: 4px dotted #FSFSDC; border-radius: 5px; } /* Bot card chat ribbon */ .css-wexxj8 { background: #C6AB80 !important; } /* Bot card tags */ .css-x2gqu0 { border: 4px dotted #FSFSDC; border-radius: 5px; background: #C6ab80; font-family: "FONT"; color: #472a28; box-shadow: none !important; } .css-x2gqu0:hover, .css-x2gqu0[data-hover] { border: 5px solid #FSFSDC; background: #c6ab80; transform: scale(1.3); } /* Tag menu button styles */ .css-1n2in4t, .css-8l42c1 { border: 2px dotted #FSFSDC; background: #c6ab80; border-radius: 5px; } .css-1n2in4t svg, .css-8l42c1 svg { /* Ensured svg styles are applied correctly */ fill: #5g382e; } /* Menu tags */ .css-1w58nos, .css-oqdsp6 { border: 5px solid #FSFSDC; background: #c6ab80; font-family: "FONT"; font-size: 6px; color: #472a28; } .css-oqdsp6 { box-shadow: none !important; border: 5px dotted #472a28 !important; } /* Button styles */ .Btn2-purple:before { transition: none; background: #5g382e; } .Btn2-purple { background: #c6ab80; } /* Total characters text */ .css-9lg76n { font-family: "FONT"; color: 71503a; } /* Responsive design for mobile devices */ @media screen and (max-width: 600px) { .column { width: 100%; /* Full width on small screens */ } /* Additional styling for mobile can be added here */ }</style>

Beach

Some text

Desert

Some text

Some text

Clouds

Some text

Some text

Purple

Galaxy

Some text

Some text

Blue

Galaxy

Some text

Some text

Jungle

Some text

Some text

csscard 1

Some text

Some text

Purple

Galaxy

Some text

Some text