cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
    <div class"one">
    <h1>Lao Tzu: Father of Taoism</h1>
    <p>Although ascetics and hermits such as Shen Tao (who advocated that one 'abandon knowledge and discard self') first wrote of the 'Tao' it is with the sixth century B.C. philosopher Lao Tzu (or 'Old Sage' -- born Li Erh) that the philosophy of Taoism really began. Some scholars believe was a slightly older contemporary of Confucius (Kung-Fu Tzu, born Chiu Chung-Ni). Other scholars feel that the Tao Te Ching, is really a compilation of paradoxical poems written by several Taoists using the pen-name, Lao Tzu. There is also a close association between Lao Tzu and the legendary Yellow Emperor, Huang-ti.</p>

    <p>According to legend Lao Tzu was keeper of the archives at the imperial court. When he was eighty years old he set out for the western border of China, toward what is now Tibet, saddened and disillusioned that men were unwilling to follow the path to natural goodness. At the border (Hank Pass), a guard, Yin Xi (Yin Hsi), asked Lao Tsu to record his teachings before he left. He then composed in 5,000 characters the Tao Te Ching (The Way and Its Power).</p>


    <p>Whatever the truth, Taoism and Confucianism have to be seen side-by-side as two distinct responses to the social, political and philosophical conditions of life two and a half millennia ago in China. Whereas Confucianism is greatly concerned with social relations, conduct and human society, Taoism has a much more individualistic and mystical character, greatly influenced by nature.</p>

    <p>In Lao Tzu's view things were said to create "unnatural" action (wei) by shaping desires (yu). The process of learning the names (ming) used in the doctrines helped one to make distinctions between good and evil, beautiful and ugly, high and low, and "being" (yu) and "non- being" (wu), thereby shaping desires. To abandon knowledge was to abandon names, distinctions, tastes and desires. Thus spontaneous behavior (wu-wei) resulted.</p>

    <p>The Taoist philosophy can perhaps best be summed up in a quote from Chuang Tzu:</p>

    <blockquote>"To regard the fundamental as the essence, to regard things as coarse, to regard accumulation as deficiency, and to dwell quietly alone with the spiritual and the intelligent -- herein lie the techniques of Tao of the ancients."</blockquote>
    <p>One element of Taoism is a kind of existential skepticism, something which can already be seen in the philosophy of Yang Chu (4th century B.C.) who wrote:</p>

    <blockquote>"What is man's life for? What pleasure is there in it? Is it for beauty and riches? Is it for sound and colour? But there comes a time when beauty and riches no longer answer the needs of the heart, and when a surfeit of sound and colour becomes a weariness to the eyes and a ringing in the ears.
"The men of old knew that life comes without warning, and as suddenly goes. They denied none of their natural inclinations, and repressed none of their bodily desires. They never felt the spur of fame. They sauntered through life gathering its pleasures as the impulse moved them. Since they cared nothing for fame after death, they were beyond the law. For name and praise, sooner or later, a long life or short one, they cared not at all."</blockquote>

    <p>Contemplating the remarkable natural world Lao Tzu felt that it was man and his activities which constituted a blight on the otherwise perfect order of things. Thus he counseled people to turn away from the folly of human pursuits and to return to one's natural wellspring.</p>
    <div class="list">
<p>The five colours blind the eye.<br />
The five tones deafen the ear.<br />
The five flavours dull the taste.<br />
Racing and hunting madden the mind.<br />
Precious things lead one astray.</p>
<p>Therefore the sage is guided by what he feels and not by what he sees.<br />
He lets go of that and chooses this.</p>

    <p>The central vehicle of achieving tranquillity was the Tao, a term which has been translated as 'the way' or 'the path.' Te in this context refers to virtue and Ching refers to laws. Thus the Tao Te Ching could be translated as The Law (or Canon) of Virtue and it's Way. The Tao was the central mystical term of the Lao Tzu and the Taoists, a formless, unfathomable source of all things.</p>

    <img src="http://www.chebucto.ns.ca/Philosophy/Taichi/Images/lao-tzu2.gif" />
    <div class="poem">
<p>Look, it cannot be seen - it is beyond form.<br />
Listen, it cannot be heard - it is beyond sound.<br />
Grasp, it cannot be held - it is intangible.<br />
These three are indefinable, they are one.</p>
<p>From above it is not bright;<br />
From below it is not dark:<br />
Unbroken thread beyond description.<br />
It returns to nothingness.<br />
Form of the formless,<br />
Image of the imageless,<br />
It is called indefinable and beyond imagination.</p>

<p>Stand before it - there is no beginning.
Follow it and there is no end.<br />
Stay with the Tao, Move with the present.</p>

<p>Knowing the ancient beginning is the essence of Tao.</p>
    <p class="foot">Taken from <a href="http://www.chebucto.ns.ca/Philosophy/Taichi/lao.html">Lao Tzu: Father of Taoism</a>
              body {    
  font-family: 'Source Sans Pro', sans-serif;
  background: url('https://images.unsplash.com/31/DQZMdflSRPiOR25XlkYo_sky.jpg') center;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
  font-size: 18px;
img {
  background-color: #fff;
  padding: 1em;
  margin: 2em;
  float: left;
a {
  color: #800;
  background-color: #ded;
  padding: 5px;
  border-radius: 7px;
.foot a:link:hover {
  opacity: 1;
  background: none;
  color: #fff;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
.foot a:hover {
  background: #fff;
  opacity: .1;
blockquote, .poem, .list {
  font-style: italic;
  font-family: 'Bree Serif', serif;
  background: #dedead;
  color: #123abc;
  padding: 12px;
  border-radius: 10px;
.list {
  width: 25%;
  margin: 0 auto;
.foot {
  width: 25%;
  clear: both;
  float: right;
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................