Step-by-Step Guide
1. Adjust Layout: Use the left control panel to select the number of tiers (1 to 4). Choose your currency symbol, text alignment, and preferred hover animation.
2. Configure Glassmorphism (Design): Fine-tune the transparency and blur. The tool uses Tailwind's arbitrary values (e.g., bg-white/[0.10] and backdrop-blur-[16px]) to generate perfect glass effects. Select a theme color to change the accents and glow.
3. Edit Tier Content: Scroll down in the control panel to modify names, subtitles, pricing, and features. Use commas to separate features. Enable "Show Discounts" to add strike-through pricing.
4. Copy & Paste: Once the live preview looks perfect, click "Copy Code". Paste the raw HTML into your project. Note: You must have Tailwind CSS installed in your project for the styling to apply automatically.
ಬಳಸುವ ವಿಧಾನ (ಹಂತ-ಹಂತವಾಗಿ)
1. ಲೇಔಟ್ ಸೆಟ್ ಮಾಡಿ: ಎಡಭಾಗದ ಕಂಟ್ರೋಲ್ ಪ್ಯಾನೆಲ್ ಬಳಸಿ ಟಿಯರ್ಗಳ ಸಂಖ್ಯೆಯನ್ನು (1 ರಿಂದ 4) ಆಯ್ಕೆಮಾಡಿ. ಕರೆನ್ಸಿ, ಟೆಕ್ಸ್ಟ್ ಅಲೈನ್ಮೆಂಟ್ ಮತ್ತು ಹೋವರ್ ಅನಿಮೇಷನ್ ಆಯ್ಕೆಮಾಡಿ.
2. ಗ್ಲಾಸ್ಮಾರ್ಫಿಸಂ (ವಿನ್ಯಾಸ) ಹೊಂದಿಸಿ: ಟ್ರಾನ್ಸ್ಪರೆನ್ಸಿ (ಪಾರದರ್ಶಕತೆ) ಮತ್ತು ಬ್ಲರ್ (ಮಂದತೆ) ಅನ್ನು ಹೊಂದಿಸಿ. ಇದು ಟೈಲ್ವಿಂಡ್ನ ಕಸ್ಟಮ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿ ಪರಿಪೂರ್ಣ ಗ್ಲಾಸ್ ಎಫೆಕ್ಟ್ ನೀಡುತ್ತದೆ. ಥೀಮ್ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಿ.
3. ಕಂಟೆಂಟ್ ತುಂಬಿರಿ: ಕಂಟ್ರೋಲ್ ಪ್ಯಾನೆಲ್ನಲ್ಲಿ ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಹೆಸರು, ಬೆಲೆ, ಸಬ್ಟೈಟಲ್ ಮತ್ತು ಫೀಚರ್ಗಳನ್ನು ಬದಲಾಯಿಸಿ. ಫೀಚರ್ಗಳನ್ನು ಬೇರ್ಪಡಿಸಲು ಕಾಮಾ (comma) ಬಳಸಿ.
4. ಕೋಡ್ ಕಾಪಿ ಮಾಡಿ: ಪ್ರಿವ್ಯೂ ಸರಿಯಾಗಿ ಕಂಡ ನಂತರ "Copy Code" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ. ಆ ಕೋಡ್ ಅನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ಪೇಸ್ಟ್ ಮಾಡಿ. ನೆನಪಿರಲಿ: ಡಿಸೈನ್ ಬರಲು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ Tailwind CSS ಇನ್ಸ್ಟಾಲ್ ಆಗಿರಬೇಕು.
उपयोग करने का तरीका (चरण-दर-चरण)
1. लेआउट सेट करें: बाएं कंट्रोल पैनल का उपयोग करके टियर की संख्या (1 से 4) चुनें। अपनी मुद्रा, टेक्स्ट अलाइनमेंट और होवर एनीमेशन चुनें।
2. ग्लासमॉर्फिज्म (डिज़ाइन) एडजस्ट करें: ट्रांसपेरेंसी और ब्लर को फाइन-ट्यून करें। यह टूल परफेक्ट ग्लास इफ़ेक्ट बनाने के लिए टेलविंड की कस्टम वैल्यूज़ का उपयोग करता है। एक्सेंट बदलने के लिए थीम का रंग चुनें।
3. कंटेंट भरें: नाम, उपशीर्षक, मूल्य निर्धारण और सुविधाओं को संशोधित करने के लिए कंट्रोल पैनल में नीचे स्क्रॉल करें। सुविधाओं को अलग करने के लिए अल्पविराम (comma) का उपयोग करें।
4. कोड कॉपी करें: एक बार लाइव प्रीव्यू सही दिखने पर, "Copy Code" पर क्लिक करें। अपने प्रोजेक्ट में HTML को पेस्ट करें। नोट: स्टाइलिंग लागू होने के लिए आपके प्रोजेक्ट में Tailwind CSS इंस्टॉल होना चाहिए।
